import { css } from "@emotion/css"
import Icon from "@aet/icons/macro"
import { memo } from "react"
import { SearchTab } from "../Search"
import { FilesTab } from "../FileTree"
import { SettingsTab } from "../Settings"
import { MarketsTab } from "../Market"
import { DocumentationTab } from "../Documentation"
import { SyncTab } from "../Sync"
import { getMap } from "~/options/utils/componentMap"

export enum SidebarTab {
  Files = "Files",
  Search = "Search",
  Documentation = "Documentation",
  Market = "Market",
  Playground = "Playground",
  Sync = "Sync",
  Settings = "Settings",
}

interface ComponentData {
  icon: React.ReactElement
  debugOnly?: boolean
  component: React.FC<{ className: string; hidden: boolean }>
}

export const tabs = getMap<SidebarTab, ComponentData>(() => ({
  [SidebarTab.Files]: {
    icon: <Icon icon="MdPalette" />,
    component: FilesTab,
  },
  [SidebarTab.Search]: {
    icon: <Icon icon="VscSearch" />,
    component: SearchTab,
  },
  [SidebarTab.Documentation]: {
    icon: <Icon icon="TbBook" />,
    debugOnly: true,
    component: DocumentationTab,
  },
  [SidebarTab.Market]: {
    icon: <Icon icon="FiGlobe" />,
    debugOnly: true,
    component: MarketsTab,
  },
  [SidebarTab.Playground]: {
    icon: <Icon icon="GrGraphQl" />,
    debugOnly: true,
    component: PlaygroundTab,
  },
  [SidebarTab.Sync]: {
    icon: <Icon icon="SlCloudDownload" />,
    component: SyncTab,
  },
  [SidebarTab.Settings]: {
    icon: <Icon icon="VscGear" />,
    component: SettingsTab,
  },
}))

const PlaygroundTab = memo<ClassNameProp>(({ className }) => (
  <div className={className}>
    <iframe
      title="Playground"
      className={css`
        border: none;
        height: 100%;
        position: fixed;
        width: calc(100vw - 50px);
        z-index: 3300000000;
      `}
      src="/playground.html"
    />
  </div>
))
