import { reactive, h } from 'vue'
import { renderIcon } from '@/utils'
import { RouterLink } from 'vue-router'
import { PageEnum } from '@/enums/pageEnum'
import { MenuOption, MenuGroupOption } from 'naive-ui'
import { icon } from '@/plugins'

const { TvOutlineIcon } = icon.ionicons5
const { DevicesIcon } = icon.carbon
export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
  return option.label
}

export const expandedKeys = () => ['three-project']

export const menuOptionsInit = () => {
  const t = window['$t']

  return reactive([
    {
      key: 'divider-1',
      type: 'divider'
    },
    {
      label: () => h('span', null, { default: () => t('project.project') }),
      key: 'three-project',
      icon: renderIcon(DevicesIcon),
      children: [
        {
          type: 'group',
          label: () => h('span', null, { default: () => t('project.three_project') }),
          key: 'my-three-project',
          children: [
            {
              label: () =>
                h(
                  RouterLink,
                  {
                    to: {
                      name: PageEnum.THREE_HOME_ITEMS_NAME
                    }
                  },
                  { default: () => t('project.all_project') }
                ),
              key: PageEnum.THREE_HOME_ITEMS_NAME,
              icon: renderIcon(TvOutlineIcon)
            }
          ]
        }
      ]
    }
  ])
}