import { useEditor } from "@/modules/editor";
import { defineUI } from "queenjs";
import { TipIcons } from "../../TipIcons";
import { Dropdown } from "ant-design-vue";
import { css } from "@linaria/core";
import { useLauncher } from "@/modules/launcher";
import AiText from "./AiText";
import { reactive } from "vue";
export default defineUI({
  setup() {
    const { actions, controls } = useEditor();
    const launcher = useLauncher();
    const { history } = controls.historyCtrl;
    const state = reactive({
      aiVisible: false,
    });
    return () => (
      <>
        <div class="absolute top-20px left-20px space-x-10px z-999">
          <TipIcons.Undo
            disable={ !controls.historyCtrl.state.enable || !history.state.canUndo}
            class={btnCls}
            onClick={() => history.undo()}
          />
          <TipIcons.Redo
            disable={ !controls.historyCtrl.state.enable || !history.state.canRedo}
            class={btnCls}
            onClick={() => history.redo()}
          />
        </div>
        <div class="absolute top-20px right-20px space-x-10px z-999">
          <Dropdown
            overlay={
              <AiText
                onVisible={(v) => {
                  state.aiVisible = v;
                }}
              />
            }
            destroyPopupOnHide={true}
            placement="bottom"
            visible={state.aiVisible}
          >
            <TipIcons.AiText
              class={btnCls}
              onClick={() => {
                state.aiVisible = !state.aiVisible;
              }}
            />
          </Dropdown>
          <TipIcons.Screenshot
            class={btnCls}
            onClick={() => actions.updateThumbnailByScreenshot(true)}
          />
        </div>
        <div class="absolute bottom-20px right-20px z-999">
          <TipIcons.QueenService
            class={btnCls}
            onClick={() => {
              launcher.showModal(<launcher.components.Viewport />, {
                width: "400px",
              });
            }}
          />
        </div>
      </>
    );
  },
});

const btnCls = css`
  padding: 10px;
  border-radius: 50%;
  background-color: #333;
  @apply shadow;
`;