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

const AntdButtonMeta: IPublicTypeComponentMetadata = {
  "componentName": "AntdButton",
  "title": "AntdButton",
  "docUrl": "",
  "screenshot": "",
  "devMode": "proCode",
  "npm": {
    "package": "jlweb-antd5-lowcoda",
    "version": "0.1.1",
    "exportName": "AntdButton",
    "main": "src\\index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
    "props": [
      {
        title: '功能',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'children',
            title: {
              label: {
                "type": "i18n",
                "en-US": "content",
                "zh-CN": "内容321"
              },
              tip: {
                "type": "i18n",
                "en-US": "children | content",
                "zh-CN": "children | 内容"
              },
            },
            "description": "内容123",
            setter: [{
              "componentName": "SlotSetter",
            }, {
              "componentName": "StringSetter",
            }, {
              "componentName": "VariableSetter",
            }],
          },
          {
            name: 'htmlType',
            title: {
              label: '原生类型',
              tip: 'htmlType | 设置 `button` 原生的 `type` 值',
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'Submit',
                      value: 'submit',
                    },
                    {
                      title: 'Reset',
                      value: 'reset',
                    },
                    {
                      title: 'Button',
                      value: 'button',
                    },
                  ],
                },
              }, {
                "componentName": "VariableSetter",
              }
            ],
            defaultValue: 'button',
          },
          {
            name: 'href',
            title: {
              label: '跳转地址',
              tip: 'href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致',
            },
            setter: [{
              "componentName": "StringSetter",
            }, {
              "componentName": "VariableSetter",
            }],
          },
          {
            name: 'target',
            title: {
              label: 'Target',
              tip: 'target | 相当于 a 链接的 target 属性，href 存在时生效',
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '本窗口跳转',
                      value: '_self',
                    },
                    {
                      title: '打开新标签页',
                      value: '_blank',
                    },
                    {
                      title: '父窗口跳转',
                      value: '_parent',
                    },
                    {
                      title: '顶层窗口跳转',
                      value: '_top',
                    },
                  ],
                },
              },
              {
                "componentName": "StringSetter",
              }, {
                "componentName": "VariableSetter",
              }
            ],
            condition: (target: IPublicModelSettingField) => {
              return !!target.getProps().getPropValue("href")?.trim();
            },
          },
        ],
      },
      {
        title: '外观',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'type',
            title: { label: '类型', tip: 'type | 设置按钮类型' },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: 'default',
                    },
                    {
                      title: '主按钮',
                      value: 'primary',
                    },
                    {
                      title: '虚线框按钮',
                      value: 'dashed',
                    },
                    {
                      title: '链接按钮',
                      value: 'link',
                    },
                    {
                      title: '类文本按钮',
                      value: 'text',
                    },
                  ],
                },
              }, {
                "componentName": "StringSetter",
              }, {
                "componentName": "VariableSetter",
              }
            ],
          },
          {
            name: 'size',
            title: { label: '尺寸', tip: 'size | 设置按钮大小' },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '大',
                      value: 'large',
                    },
                    {
                      title: '中',
                      value: 'middle',
                    },
                    {
                      title: '小',
                      value: 'small',
                    },
                  ],
                },
              }, {
                "componentName": "VariableSetter",
              }
            ],
            defaultValue: 'middle',
          },
          {
            name: 'shape',
            title: {
              label: '形状',
              tip: 'shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设',
            },
            defaultValue: 'default',
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: 'default',
                    },
                    {
                      title: '圆形',
                      value: 'circle',
                    },
                    {
                      title: '圆角',
                      value: 'round',
                    },
                  ],
                },
              }, {
                "componentName": "VariableSetter",
              }
            ],
          },
          {
            name: 'icon',
            title: { label: '图标', tip: 'icon | 设置按钮的图标组件' },
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [
                  {
                    componentName: 'AntdIcon',
                    props: {
                      type: 'SmileOutlined',
                      size: 20,
                      rotate: 0,
                      spin: false,
                    },
                  },
                ],
              },
            },
          },
          {
            name: 'block',
            title: {
              label: '自适应',
              tip: 'block | 将按钮宽度调整为其父宽度的选项',
            },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'danger',
            title: { label: '危险按钮', tip: 'danger | 设置危险按钮' },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'ghost',
            title: { label: '幽灵属性', tip: 'ghost | 幽灵属性，使按钮背景透明' },
            setter: 'BoolSetter',
            defaultValue: false,
          },
        ],
      },
      {
        title: '状态',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'loading',
            title: { label: '载入状态', tip: 'loading | 设置按钮载入状态' },
            setter: [
              {
                "componentName": "BoolSetter",
              }, {
                "componentName": "VariableSetter",
              }
            ],
          },
          {
            name: 'disabled',
            title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
            setter: [
              {
                "componentName": "BoolSetter",
              }, {
                "componentName": "VariableSetter",
              }
            ],
            defaultValue: false,
          },
        ],
      },
    ],
    "supports": {
      events: [
        {
          name: 'onClick',
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
      "style": true
    },
    "component": {}
  }
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '主按钮',
    screenshot: '',
    schema: {
      componentName: 'AntdButton',
      props: {
        type: 'primary',
        children: '主按钮',
      },
    },
  },
  {
    title: '次按钮',
    screenshot: '',
    schema: {
      componentName: 'AntdButton',
      props: {
        type: 'default',
        children: '次按钮',
      },
    },
  },
  {
    title: '文字按钮',
    screenshot: '',
    schema: {
      componentName: 'AntdButton',
      props: {
        type: 'text',
        children: '文字按钮',
      },
    },
  },
  {
    title: '虚框按钮',
    screenshot: '',
    schema: {
      componentName: 'AntdButton',
      props: {
        type: 'dashed',
        children: '虚框按钮',
      },
    },
  },
  {
    title: '链接按钮',
    screenshot: '',
    schema: {
      componentName: 'AntdButton',
      props: {
        type: 'link',
        children: '链接按钮',
      },
    },
  },
];

export default {
  ...AntdButtonMeta,
  snippets
};