import { cx } from "@linaria/core";
import { Button, Tooltip } from "ant-design-vue";
import { computed, reactive } from "vue";

import {
  IconAi,
  IconApplication,
  IconCombination,
  IconCube,
  IconImage,
  IconLayers,
  IconProfile,
  IconShape,
  IconText,
  IconTpl,
  IconVideo,
} from "@/assets/icons";
import { defineUI } from "queenjs";
import { CompTree } from "../SliderRight/CompTree";
import AiText from "./AiText";
import Application from "./Application";
import Comp3d from "./Comp3d";
import CustomComps from "./CustomComps";
import Shapes from "./Shapes";
import { Sources } from "./Sources";
import Templates from "./Templates";
import Text from "./Text";

const tabs = [
  {
    title: "模板",
    icon: IconTpl,
    component: Templates,
  },
  {
    title: "组合",
    icon: IconCombination,
    component: CustomComps,
    props: { compType: "senior" },
  },
  {
    title: "组件",
    icon: IconApplication,
    component: Application,
  },
  {
    title: "文字",
    icon: IconText,
    component: Text,
  },
  {
    title: "图片",
    icon: IconImage,
    component: Sources,
    props: { sourceType: "Image", sourceFrom: "system" },
  },
  {
    title: "视频",
    icon: IconVideo,
    component: Sources,
    props: { sourceType: "Video", sourceFrom: "system" },
  },
  {
    title: "3D",
    icon: IconCube,
    component: Comp3d,
  },
  {
    title: "形状",
    icon: IconShape,
    component: Shapes,
  },
  {
    title: "我的",
    icon: IconProfile,
    content: [
      {
        title: "图片",
        component: Sources,
        props: { sourceType: "Image", sourceFrom: "user" },
      },
      {
        title: "视频",
        component: Sources,
        props: { sourceType: "Video", sourceFrom: "user" },
      },
      {
        title: "组合",
        component: CustomComps,
        props: { compType: "user" },
      },
    ],
  },
  {
    title: "AI",
    icon: IconAi,
    component: AiText,
  },
  {
    title: "图层",
    icon: IconLayers,
    component: CompTree,
  },
];

export default defineUI({
  setup() {
    // @ts-ignore
    const state = reactive({
      tabIndex: 8,
      compIndexs: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      currentTab: computed(() => {
        return tabs[state.tabIndex];
      }),
      currCompIndex: computed(() => {
        return state.compIndexs[state.tabIndex];
      }),
    });

    return () => {
      const { tabIndex, currentTab, currCompIndex } = state;
      const currComp = currentTab.component
        ? currentTab
        : currentTab.content?.[state.currCompIndex];

      return (
        <div class="h-full flex">
          <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-hidden">
            {tabs.map((record, index) => {
              return (
                <>
                  {index === tabs.length - 2 && <div class="flex-1"></div>}
                  <div
                    key={index}
                    class={cx(
                      "my-2px rounded cursor-pointer text-light-50 transition hover:(bg-[#1F1F1F] text-orange)",
                      state.tabIndex == index && "bg-[#1F1F1F] text-orange"
                    )}
                    onClick={() => (state.tabIndex = index)}
                  >
                    <Tooltip title={record.title} placement="right">
                      <record.icon class="px-15px py-10px text-28px" />
                    </Tooltip>
                  </div>
                </>
              );
            })}
          </div>
          <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
            {currentTab.content && (
              <div class="mt-5px ml-10px space-x-10px">
                {currentTab.content?.map((item: any, index: number) => (
                  <Button
                    key={index}
                    type="text"
                    class={cx(
                      "transition",
                      currCompIndex == index && "font-bold"
                    )}
                    onClick={() => (state.compIndexs[tabIndex] = index)}
                  >
                    {item?.title}
                  </Button>
                ))}
              </div>
            )}

            <currComp.component
              class="flex-1 h-1/1 px-16px !my-10px overflow-y-auto"
              {...currComp.props}
            />
          </div>
        </div>
      );
    };
  },
});