<template>
  <MenuItem
    v-for="item in projectMenu"
    :key="item.label"
    :item="item"
    @click="item?.onClick ? item.onClick() : handleClick(item.key)"
  />
</template>

<script setup lang="ts">
import { inject, computed } from 'vue'
import {
  LuSave,
  LuSquareCode,
  LuTerminalSquare,
  LuPlaySquare,
  LuPlay,
  LuHardDriveDownload,
  LuUnplug
} from 'vue-icons-plus/lu'
import MenuItem from './components/MenuItem.vue'
import { useAppStore } from '@/store/modules/app'
import { useProjectStore } from '@/store/modules/project'
import { useI18n } from 'vue-i18n'

const onMenuClick = inject<(menuKey: string) => void>('onMenuClick', () => {})
const appStore = useAppStore()
const projectStore = useProjectStore()
const { t } = useI18n()

const projectMenu = computed(() => {
  return (
    appStore.lang && [
      {
        key: 'new',
        label: t('createProject'),
        img: new URL('@/assets/project-add.svg', import.meta.url).href
      },
      {
        key: 'open',
        label: t('openProject'),
        img: new URL('@/assets/open-project.svg', import.meta.url).href,
        onClick: projectStore.openLocalProject
      },
      {
        key: 'save',
        label: t('save'),
        img: LuSave,
        onClick: projectStore.saveProject
      },
      {
        key: 'generate',
        label: t('generateCode'),
        img: LuSquareCode
      },
      {
        key: 'compile',
        label: t('compile'),
        img: LuTerminalSquare
      },
      {
        key: 'run',
        label: t('run'),
        img: LuPlay
      },
      {
        key: 'preview',
        label: t('preview'),
        img: LuPlaySquare
      },
      {
        key: 'connect',
        label: t('connect'),
        img: LuUnplug
      },
      {
        key: 'download',
        label: t('download'),
        img: LuHardDriveDownload
      }
    ]
  )
})

const handleClick = (menuKey: string) => {
  onMenuClick?.(menuKey)
}
</script>

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