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

export default {
  componentName: 'ButtonGroup',
  title: '按钮组',
  category: '通用',
  group: '基础组件',
  props: [
    {
      name: 'arrow',
      title: { label: '下拉框箭头', tip: 'arrow | 下拉框剪头是否显示' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'destroyPopupOnHide',
      title: { label: '关闭后是否销毁 Dropdown', tip: 'destroyPopupOnHide | 关闭后是否销毁 Dropdown' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'menu',
      title: { label: '下拉菜单配置项', tip: 'menu | 下拉菜单配置项' },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'key',
                    title: 'key',
                    propType: 'string',
                    setter: 'StringSetter',
                    defaultValue: uuid(),
                  },
                  {
                    name: 'label',
                    title: '菜单项标题',
                    propType: 'string',
                    isRequired: 'true',
                    setter: 'StringSetter',
                  },
                  {
                    name: 'danger',
                    title: { label: '展示错误样式', tip: 'danger | 展示错误样式' },
                    propType: 'bool',
                    setter: 'BoolSetter',
                  },
                  {
                    name: 'disabled',
                    title: { label: '是否禁用', tip: 'disabled | 是否禁用' },
                    propType: 'bool',
                    setter: 'BoolSetter',
                  },
                  {
                    name: 'type',
                    title: '图标',
                    propType: 'string',
                    setter: {
                      componentName: AntdIconSetter,
                      props: {
                        hasClear: true,
                      },
                    },
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                key: uuid(),
                label: '标题',
                danger: false,
                disabled: false,
                type: 'SmileOutlined',
              };
            },
          },
        },
      },
    },
    {
      name: 'click',
      title: { label: '点击菜单项回调', tip: 'onClick | 点击菜单项回调' },
      propType: 'func',
      setter: [
        {
          componentName: 'FunctionSetter',
          props: {
            template: 'onClick({item, key, keyPath}, domEvent, ${extParams}){\n\n}\n',
          },
        },
      ],
    },
    {
      name: 'placement',
      title: { label: '菜单弹出位置', tip: 'placement | 菜单弹出位置' },
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: '上左',
              value: 'topLeft',
            },
            {
              title: '上中',
              value: 'top',
            },
            {
              title: '上右',
              value: 'topRight',
            },
            {
              title: '下左',
              value: 'bottomLeft',
            },
            {
              title: '下中',
              value: 'bottom',
            },
            {
              title: '下右',
              value: 'bottomRight',
            },
          ],
        },
        initialValue: 'bottomRight',
      },
    },
    {
      name: 'trigger',
      title: { label: '如何触发下拉行为', tip: 'trigger | 如何触发下拉行为' },
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: 'click',
              value: 'click',
            },
            {
              title: 'hover',
              value: 'hover',
            },
            {
              title: 'contextMenu',
              value: 'contextMenu',
            },
          ],
        },
        initialValue: 'click',
      },
    },
    {
      name: 'openChange',
      title: { label: '菜单打开的回调', tip: 'onOpenChange | 菜单打开的回调' },
      propType: 'func',
      setter: [
        {
          componentName: 'FunctionSetter',
          props: {
            template: 'onOpenChange(open,${extParams}){\n\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'loading',
      title: { label: '按钮载入状态', tip: 'loading | 按钮载入状态' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'danger',
      title: { label: '危险按钮', tip: 'danger | 危险按钮' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'icon',
      title: '右侧的图标',
      propType: 'string',
      setter: {
        componentName: AntdIconSetter,
        props: {
          hasClear: true,
        },
      },
    },
    {
      name: 'size',
      title: { label: '尺寸', tip: 'size | 设置按钮大小' },
      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '大',
                value: 'large',
              },
              {
                title: '中',
                value: 'middle',
              },
              {
                title: '小',
                value: 'small',
              },
            ],
          },
        },
      ],
      defaultValue: 'middle',
    },
    {
      name: 'buttonType',
      title: { label: '按钮类型', tip: 'type | 设置按钮类型' },
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: 'primary',
              value: 'primary',
            },
            {
              title: 'ghost',
              value: 'ghost',
            },
            {
              title: 'dashed',
              value: 'dashed',
            },
            {
              title: 'link',
              value: 'link',
            },
            {
              title: 'text',
              value: 'text',
            },
            {
              title: 'default',
              value: 'default',
            },
          ],
        },
        initialValue: 'primary',
      },
    },
  ],
  configure: {
    supports: {
      events: [
        {
          name: 'onClick',
          description: '点击按钮时的回调',
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
      style: true,
    },
  },
  snippets,
};