import { useEditor } from "@/modules/editor";
import { useResource } from "@/modules/resource";
import { css } from "@linaria/core";
import { Image, Loadmore } from "@queenjs/ui";
import { Radio } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import { Container, Draggable } from "vue-dndrop";

export const MySources = defineComponent({
  setup() {
    const editor = useEditor();
    const resource = useResource();
    const state = reactive({
      sourceType: "Image" as "Image" | "Video",
    });

    function getCurrCtrl() {
      return resource.controls[
        state.sourceType === "Image" ? "matImageListCtrl" : "matVideoListCtrl"
      ];
    }

    function switchSource(v: "Image" | "Video") {
      state.sourceType = v;
      const ctrl = getCurrCtrl();
      ctrl.hasLimit = true;
      ctrl.loadPage(1);
    }

    function clickToDesign(url: string) {
      editor.actions.clickCompToDesign(state.sourceType, (comp) => {
        comp.value.url = url;
      });
    }

    switchSource("Image");

    return () => {
      const control = getCurrCtrl();
      return (
        <div class="space-y-20px -mt-10px flex flex-col overflow-hidden">
          <Radio.Group
            class={radioCls}
            value={state.sourceType}
            size="small"
            onChange={(e) => switchSource(e.target.value)}
          >
            <Radio.Button value="Image">图片</Radio.Button>
            <Radio.Button value="Video">视频</Radio.Button>
          </Radio.Group>
          <div class="flex-1 -mr-15px pr-15px overflow-x-hidden overflow-y-auto scrollbar">
            <Container
              class="grid grid-cols-2 gap-15px"
              behaviour="copy"
              group-name="canvas"
              animation-duration={0}
              get-child-payload={(index: number) => {
                return {
                  type: state.sourceType,
                  data: control.state.list[index],
                };
              }}
            >
              {control.state.list.map((item: any) => (
                <Draggable class="">
                  <div
                    class="draggable-item"
                    style={{ aspectRatio: 1 }}
                    onClick={() => clickToDesign(item.file.url)}
                  >
                    {item.fileType == "video" ? (
                      <video src={item.file.url} class="w-full h-full object-cover" />
                    ) : (
                      <Image
                        class="w-full h-full"
                        src={item.file.url}
                        size={240}
                      />
                    )}
                  </div>
                </Draggable>
              ))}
            </Container>
            <Loadmore
              class="mt-20px"
              loading={control.state.loading}
              canLoad={control.state.canLoadNext}
              onChange={control.loadNextPage}
            />
          </div>
        </div>
      );
    };
  },
});

const radioCls = css`
  display: flex;
  > label {
    flex: 1;
    width: 0;
    text-align: center;
  }
`;
