<template>
  <template v-for="item in projectMenu" :key="item.label">
    <el-divider direction="vertical" v-if="item.type" />
    <MenuItem v-else :item="item" :disabled="item?.disabled" @click="item?.onClick?.()"> </MenuItem>
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  LuUndo,
  LuRedo,
  LuAlignStartHorizontal,
  LuAlignCenterHorizontal,
  LuAlignEndHorizontal,
  LuAlignStartVertical,
  LuAlignCenterVertical,
  LuAlignEndVertical,
  LuAlignHorizontalSpaceBetween,
  LuAlignVerticalSpaceBetween,
  LuLayoutGrid,
  LuArrowUp,
  LuArrowUpToLine,
  LuArrowDownToLine,
  LuAlignHorizontalSpaceAround,
  LuAlignVerticalSpaceAround,
  LuArrowDown
} from 'vue-icons-plus/lu'
import MenuItem from './components/MenuItem.vue'
import { useProjectStore } from '@/store/modules/project'
import { useActionStore } from '@/store/modules/action'

import type { MenuItemType } from './components/MenuItem.vue'

const projectStore = useProjectStore()
const actionStore = useActionStore()

const projectMenu = computed((): MenuItemType[] => {
  const disabledAlign = projectStore.activeWidgets.length < 1
  const disabledAvg = projectStore.activeWidgets.length < 3
  const disabledLevel = !projectStore.activeWidgets.length
  const hasLockedSelection = projectStore.activeWidgets.some((widget) => widget.locked)
  const menuItems: MenuItemType[] = [
    {
      key: 'undo',
      label: '撤销',
      img: LuUndo,
      disabled: !projectStore.canUndo,
      onClick: () => {
        projectStore.undo()
      }
    },
    {
      key: 'redo',
      label: '重做',
      img: LuRedo,
      disabled: !projectStore.canRedo,
      onClick: () => {
        projectStore.redo()
      }
    },
    {
      type: 'divider'
    },
    {
      key: 'alignLeft',
      label: '左对齐',
      img: LuAlignStartVertical,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('left')
    },
    {
      key: 'alignHorizontal',
      label: '水平对齐',
      img: LuAlignCenterVertical,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('hcenter')
    },
    {
      key: 'alignRight',
      label: '右对齐',
      img: LuAlignEndVertical,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('right')
    },
    {
      key: 'alignTop',
      label: '顶对齐',
      img: LuAlignStartHorizontal,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('top')
    },
    {
      key: 'alignVertical',
      label: '垂直居中',
      img: LuAlignCenterHorizontal,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('vcenter')
    },
    {
      key: 'alignBottom',
      label: '底对齐',
      img: LuAlignEndHorizontal,
      disabled: disabledAlign,
      onClick: () => actionStore.onAlign('bottom')
    },
    {
      key: 'alignHorizontal',
      label: '水平平均',
      img: LuAlignHorizontalSpaceAround,
      disabled: disabledAvg,
      onClick: () => actionStore.onAlign('hspace')
    },
    {
      key: 'alignVertical',
      label: '垂直平均',
      img: LuAlignVerticalSpaceAround,
      disabled: disabledAvg,
      onClick: () => actionStore.onAlign('vspace')
    },
    {
      type: 'divider'
    },
    {
      key: 'alignWidth',
      label: '宽度匹配',
      img: LuAlignHorizontalSpaceBetween,
      disabled: disabledAlign,
      onClick: () => actionStore.onMatchSize('width')
    },
    {
      key: 'alignHeight',
      label: '高度匹配',
      img: LuAlignVerticalSpaceBetween,
      disabled: disabledAlign,
      onClick: () => actionStore.onMatchSize('height')
    },
    {
      key: 'alignAll',
      label: '宽高匹配',
      img: LuLayoutGrid,
      disabled: disabledAlign,
      onClick: () => actionStore.onMatchSize('both')
    },
    {
      type: 'divider'
    },
    {
      key: 'up',
      label: '上移一层',
      img: LuArrowUp,
      disabled: disabledLevel,
      onClick: () => actionStore.onLevel('up')
    },
    {
      key: 'down',
      label: '下移一层',
      img: LuArrowDown,
      disabled: disabledLevel,
      onClick: () => actionStore.onLevel('down')
    },
    {
      key: 'top',
      label: '置于顶层',
      img: LuArrowUpToLine,
      disabled: disabledLevel,
      onClick: () => actionStore.onLevel('top')
    },
    {
      key: 'bottom',
      label: '置于底层',
      img: LuArrowDownToLine,
      disabled: disabledLevel,
      onClick: () => actionStore.onLevel('bottom')
    }
  ]

  return menuItems.map((item) => {
    if (item.type || item.key === 'undo' || item.key === 'redo' || !hasLockedSelection) {
      return item
    }

    return {
      ...item,
      disabled: true
    }
  })
})
</script>

<style lang="less" scoped></style>
