import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const buttonMeta: IPublicTypeComponentMetadata = {
  componentName: 'button',
  title: 'button',
  group: '原子组件',
  category: '按钮类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.0',
    exportName: 'button',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: '功能',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'writing',
          title: {
            label: '内容',
            tip: 'writing | 内容',
          },
          propType: {
            type: 'oneOfType',
            value: ['node', 'string'],
          },
          setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
        },
      ],
    },
    {
      title: '外观',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'icon',
          title: { label: '图标', tip: 'icon | 设置按钮的图标组件' },
          propType: 'node',
          setter: {
            componentName: 'SlotSetter',
            initialValue: {
              type: 'JSSlot',
              value: [
                {
                  componentName: 'Icon',
                  props: {
                    type: 'SmileOutlined',
                    size: 20,
                    rotate: 0,
                    spin: false,
                  },
                },
              ],
            },
          },
        },
        {
          name: 'type',
          title: { label: '类型', tip: 'type | 设置按钮类型' },
          propType: {
            type: 'oneOf',
            value: ['primary', 'default', 'ghost', 'dashed', 'danger', 'link', 'text'],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: '主按钮',
                    value: 'primary',
                  },
                  {
                    title: '次按钮',
                    value: 'default',
                  },
                  {
                    title: '虚线框按钮',
                    value: 'dashed',
                  },
                  {
                    title: '危险按钮',
                    value: 'danger',
                  },
                  {
                    title: '链接按钮',
                    value: 'link',
                  },
                  {
                    title: '类文本按钮',
                    value: 'text',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
        },
        {
          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',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'middle',
        },
        {
          name: 'shape',
          title: {
            label: '形状',
            tip: 'shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设',
          },
          propType: { type: 'oneOf', value: ['default', 'circle', 'round'] },
          defaultValue: 'default',
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '默认',
                    value: 'default',
                  },
                  {
                    title: '圆形',
                    value: 'circle',
                  },
                  {
                    title: '圆角',
                    value: 'round',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
        },

        {
          name: 'block',
          title: {
            label: '自适应',
            tip: 'block | 将按钮宽度调整为其父宽度的选项',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'danger',
          title: { label: '危险按钮', tip: 'danger | 设置危险按钮' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'ghost',
          title: { label: '幽灵属性', tip: 'ghost | 幽灵属性，使按钮背景透明' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'disabled',
          title: { label: '是否禁用', tip: 'ghost | 禁用按钮，使按钮背景不可选中' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
      ],
    },
    // {
    //   title: '状态',
    //   display: 'block',
    //   type: 'group',
    //   items: [
    //     {
    //       name: 'loading',
    //       title: { label: '载入状态', tip: 'loading | 设置按钮载入状态' },
    //       propType: 'bool',
    //       setter: ['BoolSetter', 'VariableSetter'],
    //     },
    //     {
    //       name: 'disabled',
    //       title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
    //       propType: 'bool',
    //       setter: ['BoolSetter', 'VariableSetter'],
    //       defaultValue: false,
    //     },
    //   ],
    // },
    {
      name: 'onClick',
      title: { label: '点击回调', tip: '点击按钮时的回调' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      events: [
        {
          name: 'onClick',
        },
      ],
      style: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '主按钮',
    screenshot: require('./__screenshots__/button.png'),
    schema: {
      componentName: 'button',
      props: {
        type: 'primary',
        writing: '主按钮',
      },
      children: [
        {
          componentName: 'Icon',
          props: {
            type: 'SearchOutlined',
          },
        },
      ],
    },
  },
  // {
  //   title: '次按钮',
  //   screenshot: require('./__screenshots__/button-2.png'),
  //   schema: {
  //     componentName: 'button',
  //     props: {
  //       type: 'default',
  //       writing: '次按钮',
  //     },
  //     children: [
  //       {
  //         componentName: 'Icon',
  //         props: {
  //           type: 'SearchOutlined',
  //         },
  //       },
  //     ],
  //   },
  // },
  // {
  //   title: '危险按钮',
  //   screenshot: require('./__screenshots__/button-3.png'),
  //   schema: {
  //     componentName: 'button',
  //     props: {
  //       type: 'danger',
  //       writing: '危险按钮',
  //     },
  //     children: [
  //       {
  //         componentName: 'Icon',
  //         props: {
  //           type: 'SearchOutlined',
  //         },
  //       },
  //     ],
  //   },
  // },
  // {
  //   title: '文字按钮',
  //   screenshot: require('./__screenshots__/button-4.png'),
  //   schema: {
  //     componentName: 'button',
  //     props: {
  //       type: 'text',
  //       writing: '文字按钮',
  //     },
  //     children: [
  //       {
  //         componentName: 'Icon',
  //         props: {
  //           type: 'SearchOutlined',
  //         },
  //       },
  //     ],
  //   },
  // },
  // {
  //   title: '虚框按钮',
  //   screenshot: require('./__screenshots__/button-5.png'),
  //   schema: {
  //     componentName: 'button',
  //     props: {
  //       type: 'dashed',
  //       writing: '虚框按钮',
  //     },
  //     children: [
  //       {
  //         componentName: 'Icon',
  //         props: {
  //           type: 'SearchOutlined',
  //         },
  //       },
  //     ],
  //   },
  // },
];

export default {
  ...buttonMeta,
  snippets,
};