import Thumbnail from "@/components/Thumbnail";
import { css, cx } from "@linaria/core";
import { useAuth } from "@queenjs-modules/auth";
import { IconMore } from "@queenjs/icons";
import { Dropdown, Menu, Tag } from "ant-design-vue";
import dayjs from "dayjs";
import { defineUI } from "queenjs";
import { defineComponent, reactive } from "vue";
import { any, bool, object } from "vue-types";

const VideoItem = defineComponent({
  props: {
    record: object<any>(),
  },
  emits: ["click"],
  setup(props, { emit }) {
    const state = reactive({
      play: false,
    });

    return () => {
      const { record } = props;
      const { play } = state;

      return (
        <div
          style={{ aspectRatio: 1.5 }}
          class="overflow-hidden"
          onMouseenter={() => (state.play = true)}
          onMouseleave={() => (state.play = false)}
          onClick={() => emit("click", record.file.url)}
        >
          {!play ? (
            <Thumbnail
              class="w-1/1 h-1/1"
              size={240}
              objectContain={false}
              src={record.thumbnail}
            />
          ) : (
            <video
              muted
              autoplay
              controls={false}
              src={record.file.url}
              class="w-1/1 h-1/1 object-cover"
            />
          )}
        </div>
      );
    };
  },
});

const ImageItem = defineComponent({
  props: {
    record: object<any>(),
  },
  emits: ["click"],
  setup(props, { emit }) {
    return () => {
      const { record } = props;

      return (
        <Thumbnail
          size={240}
          class="draggable-item"
          style={{ aspectRatio: 1 }}
          onClick={() => emit("click", record.file.url)}
          objectContain={true}
          src={record.file.url}
        />
      );
    };
  },
});

export default defineUI({
  props: {
    record: any(),
    tagable: bool().def(false),
    isVideo: bool().def(false),
  },
  emits: ["edit", "preview", "menu", "click"],
  setup(props, { emit }) {
    const auth = useAuth();
    const state = reactive({
      play: false,
    });

    return () => {
      const { record } = props;

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

      return (
        <div class={cx(itemStyles, "relative")}>
          {props.isVideo ? (
            <VideoItem
              onClick={(data) => emit("click", data)}
              record={props.record}
            />
          ) : (
            <ImageItem
              onClick={(data) => emit("click", data)}
              record={props.record}
            />
          )}

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

          {props.tagable && (
            <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(record.createTime).format("YYYY.MM.DD")}
                </div>
              </div>
              <Dropdown
                placement="bottom"
                overlay={
                  <Menu class="w-90px">
                    <Menu.Item>
                      <div onClick={() => emit("menu", "delete")}>删除</div>
                    </Menu.Item>

                    {isSys && !record.published && (
                      <Menu.Item>
                        <div onClick={() => emit("menu", "publish")}>
                          发布平台
                        </div>
                      </Menu.Item>
                    )}

                    {isSys && record.published && (
                      <Menu.Item>
                        <div onClick={() => emit("menu", "unpublish")}>
                          取消发布
                        </div>
                      </Menu.Item>
                    )}
                  </Menu>
                }
              >
                <IconMore class="ml-10px text-22px cursor-pointer" />
              </Dropdown>
            </div>
          )}
        </div>
      );
    };
  },
});

const itemStyles = css`
  .item_footer {
    background: #414141;
  }
  .icon_action {
    background-color: rgba(0, 0, 0, 0.8);
    &.orange {
      background-color: rgba(232, 139, 0, 0.8);
    }
  }
`;