import { useEditor } from "@/modules/editor";
import { Button, Dropdown } from "ant-design-vue";
import { defineUI, queenApi } from "queenjs";
import { TipIcons } from "../../TipIcons";
import PreviewDesignModal from "./PreviewDesignModal";
import { ShareBox } from "./ShareBox";

export default defineUI({
  setup() {
    const editor = useEditor();
    const { store, actions, controls } = editor;

    function showPreviewModal() {
      controls.screenCtrl.saveScreenPage();
      const rootPage = controls.pageCtrl.rootPage;
      rootPage.value.pageMode = controls.screenCtrl.state.screen.pageMode;
      rootPage.value.pageSizeType =
        controls.screenCtrl.state.screen.pageSizeType;

      queenApi.dialog(
        <PreviewDesignModal data={controls.pageCtrl.designData} />,
        {
          fullscreen: true,
          closable: false,
        }
      );
    }

    return () => (
      <aside class="space-x-16px flex items-center">
        <TipIcons.Preview
          class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:(!bg-dark-100)"
          onClick={showPreviewModal}
        />
        {store.isEditPage && (
          <Dropdown
            overlay={<ShareBox />}
            trigger="click"
            placement="bottomRight"
          >
            <Button
              type="default"
              class="text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
            >
              分享
            </Button>
          </Dropdown>
        )}
        <Button
          class="text-12px text-dark-500 hover:text-dark-500"
          type="primary"
          onClick={() => actions.saveDesign()}
        >
          保存
        </Button>
      </aside>
    );
  },
});