import { Folder2, MusicNoteBeamed } from "@styled-icons/bootstrap";
import { EllipsisHorizontal } from "@styled-icons/ionicons-sharp";
import { NestedMenus, StatefulMenu } from "baseui/menu";
import { StatefulPopover } from "baseui/popover";

export type ContextMenuProps = {
  file: {
    id: string;
    name: string;
    type: string;
  };
};

function ContextMenu(props: ContextMenuProps) {
  const { file } = props;
  return (
    <StatefulPopover
      autoFocus={false}
      content={({ close }) => (
        <div className="border-[var(--color-border)] w-[240px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
          <div
            className="h-[54px] flex flex-row items-center pl-[5px] pr-[5px]"
            style={{
              borderBottom: "1px solid var(--color-border)",
            }}
          >
            <div className="h-[43px] flex items-center justify-center ml-[10px] mr-[10px] text-[var(--color-text)]">
              {file.type == "folder" && (
                <div>
                  <Folder2 size={20} />
                </div>
              )}
              {file.type !== "folder" && (
                <div>
                  <MusicNoteBeamed size={20} />
                </div>
              )}
            </div>
            <div className="text-[var(--color-text)] whitespace-nowrap text-ellipsis overflow-hidden">
              {file.name}
            </div>
          </div>
          <NestedMenus>
            <StatefulMenu
              items={[
                {
                  id: "0",
                  label: "Play",
                },
                {
                  id: "1",
                  label: "Play Next",
                },
                {
                  id: "2",
                  label: "Add to Playlist",
                },
                {
                  id: "3",
                  label: "Play Last",
                },
                {
                  id: "4",
                  label: "Add Shuffled",
                },
              ]}
              onItemSelect={({ item }) => {
                console.log(`Selected item: ${item.label}`);
                close();
              }}
              overrides={{
                List: {
                  style: {
                    boxShadow: "none",
                    outline: "none !important",
                    backgroundColor: "var(--color-background)",
                  },
                },
                ListItem: {
                  style: {
                    backgroundColor: "var(--color-background)",
                    color: "var(--color-text)",
                    ":hover": {
                      backgroundColor: "var(--color-menu-hover)",
                    },
                  },
                },
                Option: {
                  props: {
                    getChildMenu: (item: { label: string }) => {
                      if (item.label === "Add to Playlist") {
                        return (
                          <div className="border-[var(--color-border)] w-[205px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
                            <StatefulMenu
                              items={{
                                __ungrouped: [
                                  {
                                    label: "Create new playlist",
                                  },
                                ],
                              }}
                              overrides={{
                                List: {
                                  style: {
                                    boxShadow: "none",
                                    outline: "none !important",
                                    backgroundColor: "var(--color-background)",
                                  },
                                },
                                ListItem: {
                                  style: {
                                    backgroundColor: "var(--color-background)",
                                    color: "var(--color-text)",
                                    ":hover": {
                                      backgroundColor:
                                        "var(--color-menu-hover)",
                                    },
                                  },
                                },
                              }}
                            />
                          </div>
                        );
                      }
                      return null;
                    },
                  },
                },
              }}
            />
          </NestedMenus>
        </div>
      )}
      overrides={{
        Inner: {
          style: {
            backgroundColor: "var(--color-background)",
          },
        },
      }}
    >
      <button className="text-[var(--color-text-muted)] cursor-pointer bg-transparent border-none hover:bg-transparent">
        <EllipsisHorizontal size={24} />
      </button>
    </StatefulPopover>
  );
}

export default ContextMenu;
