import List from "@/components/AssetsList";
import { CollectionController } from "@/modules/resource/controllers/CollectionController";
import { defineUI } from "queenjs";
import { onMounted } from "vue";
import { any } from "vue-types";
import CollectionItem from "./CollectionItem";
import Header from "./Header";

export default defineUI({
  props: {
    Controller: any<CollectionController>().isRequired,
  },
  slots: {
    Header,
    List,
  },
  setup(props, { slots }) {
    onMounted(() => {
      props.Controller.ListCtrl.loadPage(1);
    });

    return () => {
      return (
        <div>
          <slots.Header
            onAdd={() => {
              props.Controller.createCollection();
            }}
          />
          <slots.List
            gap="25px"
            class="my-30px"
            columns={5}
            control={props.Controller.ListCtrl}
            item={(record: any) => (
              <CollectionItem
                record={record}
                onMenu={(name) => {
                  props.Controller.onMenuClick(name, record);
                }}
                onEdit={(record) => {
                  props.Controller.onEdit(record);
                }}
                onPreview={(record) => props.Controller.onPreview(record)}
              />
            )}
          />
        </div>
      );
    };
  },
});