import { Tag } from "ant-design-vue";
import dayjs from "dayjs";
import { Container, Draggable } from "vue-dndrop";
import { any, bool } from "vue-types";

import Empty from "@/components/Empty";
import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { useResource } from "@/modules/resource";
import { useAuth } from "@queenjs-modules/auth";
import { Image, Loadmore } from "@queenjs/ui";
import { useReactive } from "@queenjs/use";
import { defineUI, queenApi } from "queenjs";
import { CompList } from "./CompList";
import Menu from "./Menu";

const compList = [
  // "Card2",
  // "Card3",
  // "Card5",
  // "CardList",
  // "Cards11",
  // "Cards12",
  // "Cards13",
  // "Cards14",
  // "Cards15",
  "Cover",
  "Cover2",
  // "Text1",
  // "Title1",
  // "Title2",
  // "Title3",
];

export default defineUI({
  setup() {
    const editor = useEditor();
    const resource = useResource();
    const { sysCompListCtrl } = resource.controls;
    const { compUICtrl } = editor.controls;
    sysCompListCtrl.loadPage(1);

    const state = useReactive(() => ({
      currComps() {
        return Array.from(compUICtrl.state.components.values()).filter(
          (item) => "senior" === item.compType
        );
      },
      cusComps() {
        return state.currComps.filter((d) => compList.includes(d.compKey));
      },
    }));

    return () => {
      const dataSource = sysCompListCtrl.state.list;
      return (
        <div>
          <CompList dataSource={dataSource} isSys={true} />
          <Comp components={state.cusComps} taggable={false} class="mt-10px" />
          {dataSource.length == 0 ? null : (
            <Loadmore
              class="mt-20px"
              loading={sysCompListCtrl.state.loading}
              canLoad={sysCompListCtrl.state.canLoadNext}
              onChange={sysCompListCtrl.loadNextPage}
            />
          )}
        </div>
      );
    };
  },
});

const Comp = defineUI({
  props: {
    components: any<
      {
        compKey: string;
        name: string;
        thumbnail: string;
        published?: boolean;
        createTime?: string;
      }[]
    >().isRequired,

    taggable: bool().def(false),
  },
  setup(props) {
    const editor = useEditor();
    const auth = useAuth();
    const resource = useResource();

    return () => {
      //@ts-ignore
      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;

      if (props.components.length == 0) return <Empty class="pt-150px" />;
      return (
        <Container
          class="space-y-10px scrollbar"
          behaviour="copy"
          group-name="canvas"
          animation-duration={0}
          get-child-payload={(index: number) => {
            return props.components[index].compKey;
          }}
        >
          {props.components.map((item) => {
            const items = ["删除"];

            if (isSys) {
              item.published ? items.push("取消发布") : items.push("发布平台");
            }

            return (
              <Draggable>
                <div
                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
                  key={item.compKey}
                  title={item.name}
                  onClick={() =>
                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
                  }
                >
                  <Image
                    class="w-full rounded pointer-events-none"
                    src={item.thumbnail}
                    size={240}
                  />

                  {isSys && props.taggable && (
                    <Tag
                      color={item.published ? "green" : "#E88B00"}
                      // color="rgba(0, 0, 0, 0.4)"
                      class="absolute top-0 left-0 z-1 !rounded-none"
                    >
                      {item.published ? "已发布" : "未发布"}
                    </Tag>
                  )}

                  {props.taggable && (
                    <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
                      <div class="flex-1 w-0">
                        {/* <div class="text-white text-bold truncate">{record.title}</div> */}
                        <div class="flex items-center text-opacity-60 text-white text-12px">
                          {dayjs(item.createTime).format("YYYY.MM.DD")}
                        </div>
                      </div>
                      <Menu
                        items={items}
                        onMenu={async (name) => {
                          console.log("name", name);
                          if (name == "删除") {
                            await resource.actions.deleteCustomComp(item);
                            // editor.controls.compUICtrl.
                            queenApi.messageSuccess("删除成功!");
                            return;
                          }
                          const pub = name == "发布平台";
                          await resource.actions.publishFrame(item, pub);
                          item.published = pub;
                        }}
                      />
                    </div>
                  )}
                </div>
              </Draggable>
            );
          })}
        </Container>
      );
    };
  },
});