<template>
  <div>
    <Tooltip>
      <template #title>
        <div>撤销</div>
        <div>ctrl+z</div>
      </template>
      <Button
        type="text"
        size="small"
        :disabled="actionStore.undoDisabled"
        @click="actionStore.actionUndo"
      >
        <UndoOutlined />
      </Button>
    </Tooltip>

    <Tooltip>
      <template #title>
        <div>还原</div>
        <div>ctrl+shift+z</div>
      </template>
      <Button
        type="text"
        size="small"
        :disabled="actionStore.redoDisabled"
        @click="actionStore.actionRedo"
      >
        <RedoOutlined />
      </Button>
    </Tooltip>

    <Divider type="vertical" />

    <Tooltip>
      <template #title>
        <div>组合</div>
        <div>ctrl+g</div>
      </template>
      <Button
        type="text"
        size="small"
        :disabled="projectStore.selectedElementKeys.length <= 1"
        @click="actionStore.actionGroup"
      >
        <BlockOutlined />
      </Button>
    </Tooltip>

    <Tooltip>
      <template #title>
        <div>取消组合</div>
        <div>ctrl+shift+g</div>
      </template>

      <Button type="text" size="small" :disabled="ungroupDisabled" @click="actionStore.actionUngroup">
        <SplitCellsOutlined />
      </Button>
    </Tooltip>

    <Tooltip>
      <template #title>
        <div>删除</div>
        <div>del</div>
      </template>
      <Button
        type="text"
        size="small"
        :disabled="!projectStore.selectedElementKeys.length"
        @click="handleDeleteElements"
      >
        <DeleteOutlined />
      </Button>
    </Tooltip>

    <Divider type="vertical" />

    <Dropdown trigger="click">
      <template #overlay>
        <Menu
          @click="handleAlignClick"
          :disabled="projectStore.selectedElementKeys.length < 2"
        >
          <MenuItem :key="AlignEnum.Left">
            <VerticalRightOutlined />
            左对齐
          </MenuItem>
          <MenuItem :key="AlignEnum.Right">
            <VerticalLeftOutlined />
            右对齐
          </MenuItem>
          <MenuItem :key="AlignEnum.HorizontalCenter">
            <VerticalAlignMiddleOutlined />
            水平居中
          </MenuItem>
          <MenuDivider />
          <MenuItem :key="AlignEnum.Top">
            <VerticalAlignTopOutlined />
            顶部对齐
          </MenuItem>
          <MenuItem :key="AlignEnum.Bottom">
            <VerticalAlignBottomOutlined />
            底部对齐
          </MenuItem>
          <MenuItem :key="AlignEnum.VerticalCenter">
            <LineOutlined />
            垂直居中
          </MenuItem>
        </Menu>
      </template>
      <Tooltip placement="left">
        <template #title>
          <div>对齐</div>
        </template>
        <Button
          :disabled="projectStore.selectedElementKeys.length < 2"
          type="text"
          size="small"
        >
          <VerticalAlignMiddleOutlined />
          <CaretDownOutlined
            style="font-size: 10px; vertical-align: baseline"
          />
        </Button>
      </Tooltip>
    </Dropdown>

    <Dropdown trigger="click">
      <template #overlay>
        <Menu
          @click="handleLayerClick"
          :disabled="projectStore.selectedElementKeys.length < 1"
        >
          <MenuItem
            :key="LayerEnum.UP"
            v-if="projectStore.selectedElementKeys.length === 1"
          >
            <ArrowUpOutlined />
            上移一层
          </MenuItem>
          <MenuItem
            :key="LayerEnum.DOWN"
            v-if="projectStore.selectedElementKeys.length === 1"
          >
            <ArrowDownOutlined />
            下移一层
          </MenuItem>
          <MenuItem :key="LayerEnum.TOP">
            <VerticalAlignTopOutlined />
            移至顶层
          </MenuItem>
          <MenuItem :key="LayerEnum.BOTTOM">
            <VerticalAlignBottomOutlined />
            移至底层
          </MenuItem>
        </Menu>
      </template>
      <Tooltip placement="right">
        <template #title>
          <div>层级</div>
        </template>
        <Button
          type="text"
          size="small"
          :disabled="projectStore.selectedElementKeys.length < 1"
        >
          <ColumnHeightOutlined />
          <CaretDownOutlined
            style="font-size: 10px; vertical-align: baseline"
          />
        </Button>
      </Tooltip>
    </Dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import {
  Button,
  Divider,
  Tooltip,
  Dropdown,
  Menu,
  MenuItem,
  MenuDivider,
} from "ant-design-vue";
import {
  UndoOutlined,
  RedoOutlined,
  DeleteOutlined,
  ColumnHeightOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignMiddleOutlined,
  BlockOutlined,
  SplitCellsOutlined,
  VerticalAlignBottomOutlined,
  CaretDownOutlined,
  VerticalRightOutlined,
  VerticalLeftOutlined,
  LineOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
} from "@ant-design/icons-vue";

import { AlignEnum } from "@/enum/alignEnum";
import { LayerEnum } from "@/enum/layerEnum";
import { useAcionStore } from "@/store/modules/action";
import { useProjectStore } from "@/store/modules/project";
import { useKeyPress } from 'vue-hooks-plus';

const actionStore = useAcionStore();
const projectStore = useProjectStore();
const ungroupDisabled = computed(() => {
  const length = projectStore.selectedElementKeys.length;
  const current = projectStore.currentSelectedElements?.[0];
  return !(length === 1 && current?.componentType === 'group');
});
const handleAlignClick = ({ key }: any) => {
  actionStore.actionAlign(key);
};
const handleLayerClick = ({ key }: any) => {
  actionStore.actionLayer(key);
};
const handleDeleteElements = () => {
  projectStore.selectedElementKeys.forEach((key) => {
    projectStore.removeElement(key);
  });
};

/* =========================快捷键=========================== */
// 撤销/重做
useKeyPress('ctrl.z', () => !actionStore.undoDisabled && actionStore.actionUndo(), { exactMatch: true });
useKeyPress('ctrl.shift.z', () => !actionStore.redoDisabled && actionStore.actionRedo(), { exactMatch: true });
// 组合/取消组合
useKeyPress('ctrl.g', () => projectStore.selectedElementKeys.length > 1 && actionStore.actionGroup(), { exactMatch: true });
useKeyPress('ctrl.shift.g', () => !ungroupDisabled.value && actionStore.actionUngroup(), { exactMatch: true });
// 删除
useKeyPress('delete', () => projectStore.selectedElementKeys.length && handleDeleteElements(), { exactMatch: true });
// 调整层级
useKeyPress('ctrl.up', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.UP), { exactMatch: true });
useKeyPress('ctrl.down', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.DOWN), { exactMatch: true });
useKeyPress('ctrl.shift.up', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.TOP), { exactMatch: true });
useKeyPress('ctrl.shift.down', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.BOTTOM), { exactMatch: true });
// 复制/粘贴
useKeyPress('ctrl.c', () => projectStore.selectedElementKeys.length && actionStore.actionCopy(), { exactMatch: true });
useKeyPress('ctrl.v', () => actionStore.actionPaste(), { exactMatch: true });
</script>

<style scoped></style>
