import { Button } from "ant-design-vue";
import { defineComponent } from "vue";
import { useResource } from "../..";
import MaterialTemplateModal from "./MaterialTemplateModal";
import { css, cx } from "@linaria/core";
import { queenApi } from "queenjs";

const materialType = [
  { name: "视频", key: "video" },
  { name: "图片", key: "image" },
  { name: "渲染任务", key: "task" },
];

export default defineComponent({
  emits: ["change"],
  setup(props, { emit }) {
    const resource = useResource();
    const { store } = resource;

    const showModal = (type: string) => {
      // resource.showModal(<MaterialTemplateModal type={type} />, {
      //   title: `${type === "image" ? "图片" : "视频"}模板中心`,
      //   width: "1000px",
      // });
       queenApi.messageSuccess("努力开发中,尽请期待!")
    };

    return () => {
      return (
        <div
          class={cx(rootStyles, "flex items-center justify-between mt-20px")}
        >
          <div class="filter space-x-60px">
            {materialType.map((d) => (
              <span
                key={d.key}
                onClick={() => emit("change", d.key)}
                class={cx(
                  store.type == d.key && "active",
                  "cursor-pointer btn_tab"
                )}
              >
                {d.name}
              </span>
            ))}
          </div>
          <div>
            <Button
              ghost
              type="primary"
              onClick={resource.actions.createMaterial}
            >
              上传素材
            </Button>
            <Button
              ghost
              type="primary"
              class="ml-25px"
              onClick={() => showModal("image")}
            >
              生成图片
            </Button>
            <Button
              ghost
              type="primary"
              class="ml-15px"
              onClick={() => showModal("video")}
            >
              生成视频
            </Button>
          </div>
        </div>
      );
    };
  },
});

const rootStyles = css`
  .btn_tab {
    padding: 3px 5px;
    &:hover,
    &.active {
      color: @inf-primary-color;
    }
  }
`;