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';
import { useI18n } from '@/hooks/web/useI18n';

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

export const expandedKeys = () => ['all-project'];
// 我的项目菜单
export const menuOptionsInit = () => {
  const { t } = useI18n();

  return reactive([
    {
      type: 'group',
      label: () => h('span', null, { default: () => t('project.my') }),
      key: 'my-project',
      children: [
        {
          label: () =>
            h(
              RouterLink,
              {
                to: {
                  name: PageEnum.BASE_HOME_ITEMS_NAME,
                },
              },
              { default: () => t('project.all_project') },
            ),
          key: PageEnum.BASE_HOME_ITEMS_NAME,
          icon: renderIcon(TvOutlineIcon),
        },
        {
          label: () =>
            h(
              RouterLink,
              {
                to: {
                  name: PageEnum.BASE_HOME_REMOTE_NAME,
                },
              },
              { default: () => t('project.remote_component') },
            ),
          key: PageEnum.BASE_HOME_REMOTE_NAME,
          icon: renderIcon(TvOutlineIcon),
        },
      ],
    },
  ]);
};
