import { uuid } from '../_utils/utils';

import snippets from './snippets';

export default {
  snippets,
  componentName: 'AntdMenu',
  title: '导航菜单',
  category: '导航',
  group: '基础组件',
  props: [
    {
      name: 'items',
      title: { label: '菜单项', tip: 'items | 菜单项' },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'key',
                    title: { label: 'key', tip: 'key | key' },
                    setter: 'StringSetter',
                    initialValue: (val) => val || uuid(),
                    isRequired: true,
                  },
                  {
                    name: 'label',
                    title: { label: '菜单名称', tip: 'label | 菜单名称' },
                    setter: 'StringSetter',
                    isRequired: true,
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                key: 'item-' + uuid(),
                category: 'AntdMenu.Item',
                label: '菜单名' + uuid(),
              };
            },
          },
        },
      },
    },
    {
      name: 'inlineCollapsed',
      title: { label: '是否收起', tip: 'inlineCollapsed | inline 时菜单是否收起状态' },
      propType: 'bool',
    },
    {
      name: 'mode',
      title: {
        label: '菜单类型',
        tip: 'mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种',
      },
      propType: { type: 'oneOf', value: ['vertical', 'horizontal', 'inline'] },
    },
    {
      name: 'inlineIndent',
      title: { label: '缩进宽度', tip: 'inlineIndent | inline 模式的菜单缩进宽度' },
      propType: 'number',
      condition(target) {
        return target.getProps().getPropValue('mode') === 'inline';
      },
    },
    {
      name: 'multiple',
      title: { label: '是否允许多选', tip: 'multiple | 是否允许多选' },
      propType: 'bool',
      defaultValue: false,
    },
    {
      name: 'selectable',
      title: { label: '是否允许选中', tip: 'selectable | 是否允许选中' },
      propType: 'bool',
      defaultValue: true,
    },
    {
      name: 'defaultSelectedKeys',
      title: { label: '初始选中项', tip: 'defaultSelectedKeys | 初始选中的菜单项 key 数组' },
      propType: { type: 'arrayOf', value: 'string' },
    },
    {
      name: 'selectedKeys',
      title: { label: '当前选中项', tip: 'selectedKeys | 当前选中的菜单项 key 数组' },
      propType: { type: 'arrayOf', value: 'string' },
    },
    {
      name: 'subMenuCloseDelay',
      title: {
        label: '关闭延时',
        tip: 'subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒',
      },
      propType: 'number',
    },
    {
      name: 'subMenuOpenDelay',
      title: {
        label: '开启延时',
        tip: 'subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒',
      },
      propType: 'number',
    },
    {
      name: 'theme',
      title: { label: '主题颜色', tip: 'theme | 主题颜色' },
      propType: { type: 'oneOf', value: ['light', 'dark'] },
    },
    {
      name: 'onClick',
      title: { label: '点击 MenuItem 调用函数', tip: 'onClick | 点击 MenuItem 调用函数' },
      propType: 'func',
    },
    {
      name: 'onDeselect',
      title: {
        label: '取消选中时调用函数',
        tip: 'onDeselect | 取消选中时调用，仅在 multiple 生效',
      },
      propType: 'func',
    },
    {
      name: 'triggerSubMenuAction',
      title: {
        label: '触发方式',
        tip: 'triggerSubMenuAction | 展开/关闭的触发行为',
      },
      propType: { type: 'oneOf', value: ['hover', 'click'] },
    },
    {
      name: 'onOpenChange',
      title: { label: 'SubMenu 展开/关闭的回调', tip: 'onOpenChange | 展开/关闭的回调' },
      propType: 'func',
    },
    {
      name: 'onSelect',
      title: { label: '被选中时调用函数', tip: 'onSelect | 被选中时调用函数' },
      propType: 'func',
    },
    {
      name: 'overflowedIndicator',
      title: { label: '折叠图标', tip: 'overflowedIndicator | 自定义 Menu 折叠时的图标' },
      propType: 'node',
    },
  ],
  configure: {
    // component: { isContainer: true },
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          description: '点击MenuItem时调用',
          template:
            "onClick({item,key,keyPath,domEvent},${extParams}){\n// 点击 MenuItem 调用此函数\nconsole.log('onClick',item,key,keyPath,domEvent);}",
        },
        {
          name: 'onDeselect',
          description: '取消选中时调用',
          template:
            "onDeselect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 取消选中时调用，仅在 multiple 生效\nconsole.log('onDeselect',item,key,keyPath,selectedKeys,domEvent);}",
        },
        {
          name: 'onOpenChange',
          description: '展开/关闭的回调',
          template:
            "onOpenChange(openKeys,${extParams}){\n// SubMenu 展开/关闭的回调\nconsole.log('onOpenChange',openKeys);}",
        },
        {
          name: 'onSelect',
          description: '被选中时调用',
          template:
            "onSelect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 被选中时调用\nconsole.log('onSelect',item,key,keyPath,selectedKeys,domEvent);}",
        },
      ],
    },
  },
};