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

export default {
  snippets,
  componentName: 'AnfaMenu',
  title: '菜单',
  category: '通用',
  group: "精选组件",
  props: [
    {
      name: 'mode',
      title: '菜单类型',
      propType: 'string',
      defaultValue: 'vertical',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            { label: '垂直菜单', value: 'vertical' },
            { label: '水平菜单', value: 'horizontal' },
            { label: '内嵌菜单', value: 'inline' },
          ],
        },
      },
    },
    {
      name: 'theme',
      title: '主题',
      propType: 'string',
      defaultValue: 'light',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            { label: '浅色', value: 'light' },
            { label: '深色', value: 'dark' },
          ],
        },
      },
    },
    {
      name: 'showBottomLine',
      title: '显示底部分割线',
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'items',
      title: '菜单项',
      propType: 'array',
      setter: {
        componentName: 'ArraySetter',
        props: items
      },
    },
    {
      name: 'defaultSelectedKeys',
      title: '默认选中的菜单项',
      propType: 'array',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: 'StringSetter',
        },
      },
    },
    {
      name: 'defaultOpenKeys',
      title: '默认展开的子菜单',
      propType: 'array',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: 'StringSetter',
        },
      },
    },
    {
      name: 'selectedKeys',
      title: '当前选中的菜单项',
      propType: 'array',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: 'StringSetter',
        },
      },
    },
    {
      name: 'openKeys',
      title: '当前展开的子菜单',
      propType: 'array',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: 'StringSetter',
        },
      },
    },
    {
      name: 'inlineCollapsed',
      title: '是否折叠',
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'inlineIndent',
      title: '内嵌菜单的缩进',
      propType: 'number',
      setter: 'NumberSetter',
      defaultValue: 24,
    },
    {
      name: 'multiple',
      title: '是否允许多选',
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'selectable',
      title: '是否允许选中',
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    {
      name: 'style',
      title: '自定义样式',
      propType: 'object',
      setter: 'StyleSetter',
    },
    {
      name: 'className',
      title: '自定义类名',
      propType: 'string',
      setter: 'StringSetter',
    }
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          title: '点击菜单项的回调',
          template:
            "onClick(event,${extParams}){\n// 点击菜单项时回调\nconsole.log('onClick', event);}",
        },
        {
          name: 'onSelect',
          title: '被选中时调用',
          template:
            "onSelect(event,${extParams}){\n// 菜单项被选中时回调\nconsole.log('onSelect', event);}",
        },
        {
          name: 'onDeselect',
          title: '取消选中时调用',
          template:
            "onDeselect(event,${extParams}){\n// 菜单项取消选中时回调\nconsole.log('onDeselect', event);}",
        },
        {
          name: 'onOpenChange',
          title: '展开/收起子菜单时调用',
          template:
            "onOpenChange(event,${extParams}){\n// 展开/收起子菜单时回调\nconsole.log('onOpenChange', event);}",
        },
      ],
    },
  }
};