import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
import snippets from './snippets';

const SubmitButtonMeta: ComponentMetadata = {
  componentName: 'SubmitButton',
  title: '提交按钮',
  category: '表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'SubmitButton',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Info',
        'zh-CN': '信息',
      },
      display: 'accordion',
      items: [
        {
          name: 'childrenString',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Text',
              'zh-CN': '文字',
            },
          },
          setter: ['PisellI18nSetter'],
          defaultValue: {
            type: 'i18n',
            en: 'Submit',
            'zh-CN': '提交',
            'zh-HK': '提交',
          },
        },
        {
          name: 'status',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Status',
              'zh-CN': '状态',
            },
          },
          propType: {
            type: 'oneOf',
            value: ['normal', 'disabled', 'hidden'],
          },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '正常',
                  value: 'normal',
                },
                {
                  title: '禁用',
                  value: 'disabled',
                },
                {
                  title: '隐藏',
                  value: 'hidden',
                },
              ],
            },
          },
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Appearance',
        'zh-CN': '外观',
      },
      display: 'accordion',
      items: [
        {
          name: 'type',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Button type',
              'zh-CN': '按钮类型',
            },
          },
          propType: {
            type: 'oneOf',
            value: [
              'primary',
              'default',
              'ghost',
              'dashed',
              'danger',
              'link',
              'text',
            ],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: 'primary button',
                    value: 'primary',
                  },
                  {
                    title: 'default button',
                    value: 'default',
                  },
                  {
                    title: 'dashed button',
                    value: 'dashed',
                  },
                  {
                    title: 'danger button',
                    value: 'danger',
                  },
                  {
                    title: 'link button',
                    value: 'link',
                  },
                  {
                    title: 'text button',
                    value: 'text',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Submission',
        'zh-CN': '提交',
      },
      display: 'accordion',
      items: [
        {
          name: 'confirmConfig',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Confirm before submission',
              'zh-CN': '提交前确认',
            },
          },
          setter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'enable',
                    title: {
                      type: 'i18n',
                      'en-US': 'Enable',
                      'zh-CN': '启用',
                    },
                    setter: 'BoolSetter',
                    isRequired: true,
                  },
                  {
                    name: 'icon',
                    title: {
                      type: 'i18n',
                      'en-US': 'Icon',
                      'zh-CN': '图标',
                    },
                    setter: [
                      {
                        componentName: 'SlotSetter',
                        initialValue: {
                          type: 'JSSlot',
                          value: [
                            {
                              componentName: 'Icon',
                              props: {
                                type: 'SmileOutlined',
                                size: 20,
                                rotate: 0,
                                spin: false,
                              },
                            },
                          ],
                        },
                        defaultValue: null,
                      },
                    ],
                  },
                  {
                    name: 'title',
                    title: {
                      type: 'i18n',
                      'en-US': 'Title',
                      'zh-CN': '标题',
                    },
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    defaultValue: {
                      type: 'i18n',
                      en: 'Confirm submission',
                      'zh-CN': '确认提交',
                      'zh-HK': '確認提交',
                    },
                  },
                  {
                    name: 'content',
                    title: {
                      type: 'i18n',
                      'en-US': 'Helper text',
                      'zh-CN': '辅助文字',
                    },
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    defaultValue: {
                      type: 'i18n',
                      en: 'Are you sure you want to submit this form?',
                      'zh-CN': '确定要提交此表单吗？',
                      'zh-HK': '確定要提交此表單嗎？',
                    },
                  },
                  {
                    name: 'cancelText',
                    title: {
                      type: 'i18n',
                      'en-US': 'Cancel button text',
                      'zh-CN': '取消按钮文字',
                    },
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    defaultValue: {
                      type: 'i18n',
                      en: 'Cancel',
                      'zh-CN': '取消',
                      'zh-HK': '取消',
                    },
                  },
                  {
                    name: 'okText',
                    title: {
                      type: 'i18n',
                      'en-US': 'OK button text',
                      'zh-CN': '确定按钮文字',
                    },
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    defaultValue: {
                      type: 'i18n',
                      en: 'Submit',
                      'zh-CN': '提交',
                      'zh-HK': '提交',
                    },
                  },
                ],
              },
              columns: 1,
              forceInline: 1,
              mode: 'popup',
            },
          },
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'After submimssion',
        'zh-CN': '提交后',
      },
      display: 'accordion',
      items: [
        {
          name: 'toastConfig',
          title: {
            type: 'i18n',
            'en-US': 'Show Toast',
            'zh-CN': '显示提示',
          },
          setter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'enable',
                    title: {
                      type: 'i18n',
                      'en-US': 'Enable',
                      'zh-CN': '启用',
                    },
                    setter: 'BoolSetter',
                    isRequired: true,
                  },
                  {
                    name: 'icon',
                    title: {
                      type: 'i18n',
                      'en-US': 'Icon',
                      'zh-CN': '图标',
                    },
                    setter: [
                      {
                        componentName: 'SlotSetter',
                        initialValue: {
                          type: 'JSSlot',
                          value: [
                            {
                              componentName: 'Icon',
                              props: {
                                type: 'SmileOutlined',
                                size: 20,
                                rotate: 0,
                                spin: false,
                              },
                            },
                          ],
                        },
                        defaultValue: null,
                      },
                    ],
                  },
                  {
                    name: 'title',
                    title: {
                      type: 'i18n',
                      'en-US': 'Text',
                      'zh-CN': '文字',
                    },
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    defaultValue: {
                      type: 'i18n',
                      en: 'Submitted successfully',
                      'zh-CN': '提交成功',
                      'zh-HK': '提交成功',
                    },
                  },
                  {
                    name: 'showAfterSubmit',
                    title: {
                      type: 'i18n',
                      'en-US': 'Show after submit',
                      'zh-CN': '提交成功后显示',
                    },
                    setter: 'BoolSetter',
                    defaultValue: true,
                  }
                ],
              },
              columns: 1,
              forceInline: 1,
              mode: 'popup',
            },
          },
        },
        {
          name: 'refreshData',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Refresh data',
              'zh-CN': '刷新数据',
            },
          },
          setter: 'BoolSetter',
        },
        {
          name: 'afterSubmitType',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Action after submission',
              'zh-CN': '提交后动作',
            },
          },
          setter: {
            componentName: 'SelectSetter',
            props: {
              options: [
                {
                  title: '无操作',
                  value: 'none',
                },
                {
                  title: '关闭当前抽屉/对话框',
                  value: 'close',
                },
                {
                  title: '显示模态框',
                  value: 'showModal',
                },
                {
                  title: '显示通知框',
                  value: 'showNotification',
                },
              ],
            },
          },
        },
        {
          name: 'afterSubmitModalConfig',
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          condition: (props) => {
            return props.getPropValue('afterSubmitType') === 'showModal';
          },
          title: {
            label: '模态框配置',
          },
          items: [
            {
              name: 'afterSubmitModalConfig.title',
              title: {
                type: 'i18n',
                'en-US': 'Title',
                'zh-CN': '标题',
              },
              setter: 'PisellI18nSetter',
              defaultValue: {
                type: 'i18n',
                en: 'Submitted successfully',
                'zh-CN': '提交成功',
                'zh-HK': '提交成功',
              },
            },
            {
              name: 'afterSubmitModalConfig.content',
              title: {
                type: 'i18n',
                'en-US': 'Content',
                'zh-CN': '内容',
              },
              setter: 'PisellI18nSetter',
              defaultValue: {
                type: 'i18n',
                en: 'Your form has been successfully submitted',
                'zh-CN': '您的表单已成功提交',
                'zh-HK': '您的表單已成功提交',
              },
            },
            {
              name: 'afterSubmitModalConfig.okText',
              title: {
                type: 'i18n',
                'en-US': 'Button text',
                'zh-CN': '按钮文字',
              },
              setter: 'PisellI18nSetter',
              defaultValue: {
                type: 'i18n',
                en: 'OK',
                'zh-CN': '确定',
                'zh-HK': '確定',
              },
            },
          ],
        },
        {
          name: 'afterSubmitNotificationConfig',
          title: {
            label: '通知框配置',
          },
          condition: (props) => {
            return props.getPropValue('afterSubmitType') === 'showNotification';
          },
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'afterSubmitNotificationConfig.icon',
              title: {
                type: 'i18n',
                'en-US': 'Icon',
                'zh-CN': '图标',
              },
              setter: [
                {
                  componentName: 'SlotSetter',
                  initialValue: {
                    type: 'JSSlot',
                    value: [
                      {
                        componentName: 'Icon',
                        props: {
                          type: 'SmileOutlined',
                          size: 20,
                          rotate: 0,
                          spin: false,
                        },
                      },
                    ],
                  },
                  defaultValue: null,
                },
              ],
            },
            {
              name: 'afterSubmitNotificationConfig.title',
              title: {
                type: 'i18n',
                'en-US': 'Text',
                'zh-CN': '文字',
              },
              setter: 'PisellI18nSetter',
              defaultValue: {
                type: 'i18n',
                en: 'Submitted successfully',
                'zh-CN': '提交成功',
                'zh-HK': '提交成功',
              },
            },
            {
              name: 'afterSubmitNotificationConfig.content',
              title: {
                type: 'i18n',
                'en-US': 'Message',
                'zh-CN': '消息',
              },
              setter: 'PisellI18nSetter',
              defaultValue: {
                type: 'i18n',
                en: 'Your form has been successfully submitted',
                'zh-CN': '您的表单已成功提交',
                'zh-HK': '您的表單已成功提交',
              },
            },
            {
              name: 'afterSubmitNotificationConfig.placement',
              title: {
                type: 'i18n',
                'en-US': 'Placement',
                'zh-CN': '位置',
              },
              setter: {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: 'top',
                      value: 'top',
                    },
                    {
                      title: 'topLeft',
                      value: 'topLeft',
                    },
                    {
                      title: 'topRight',
                      value: 'topRight',
                    },
                    {
                      title: 'bottom',
                      value: 'bottom',
                    },
                    {
                      title: 'bottomLeft',
                      value: 'bottomLeft',
                    },
                    {
                      title: 'bottomRight',
                      value: 'bottomRight',
                    },
                  ],
                },
              },
              defaultValue: 'top',
            },
            {
              name: 'afterSubmitNotificationConfig.duration',
              title: {
                type: 'i18n',
                'en-US': 'Duration',
                'zh-CN': '持续时间',
              },
              setter: 'NumberSetter',
              defaultValue: 4.5,
            },
          ],
        },
      ],
    },
  ],
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Feature',
            'zh-CN': '功能',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'children',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'content',
                'zh-CN': '内容',
              },
              tip: 'children',
            },
            propType: {
              type: 'oneOfType',
              value: ['node', 'string'],
            },
            setter: ['SlotSetter', 'PisellI18nSetter', 'VariableSetter'],
          },
          {
            name: 'htmlType',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'native type',
                'zh-CN': '原生类型',
              },
              tip: {
                type: 'i18n',
                'en-US': 'htmlType | Set the native `type` value of `button`',
                'zh-CN': 'htmlType | 设置 `button` 原生的 `type` 值',
              },
            },
            propType: {
              type: 'oneOf',
              value: ['submit', 'reset', 'button'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'Submit',
                      value: 'submit',
                    },
                    {
                      title: 'Reset',
                      value: 'reset',
                    },
                    {
                      title: 'Button',
                      value: 'button',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'button',
          },
          {
            name: 'className',
            title: {
              label: '样式类名',
              tip: 'className | 样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'href',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'jump address',
                'zh-CN': '跳转地址',
              },
              tip: {
                type: 'i18n',
                'en-US':
                  'href | click to jump to the address, specify this attribute button behavior is consistent with a link',
                'zh-CN':
                  'href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'target',
            title: {
              label: 'Target',
              tip: {
                type: 'i18n',
                'en-US':
                  'target | Equivalent to the target attribute of a link, effective when href exists',
                'zh-CN':
                  'target | 相当于 a 链接的 target 属性，href 存在时生效',
              },
            },
            propType: {
              type: 'oneOf',
              value: ['_self', '_blank', '_parent', '_top'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: {
                        type: 'i18n',
                        'en-US': 'Jump to this window',
                        'zh-CN': '本窗口跳转',
                      },
                      value: '_self',
                    },
                    {
                      title: {
                        type: 'i18n',
                        'en-US': 'open a new tab',
                        'zh-CN': '打开新标签页',
                      },
                      value: '_blank',
                    },
                    {
                      title: {
                        type: 'i18n',
                        'en-US': 'parent window jump',
                        'zh-CN': '父窗口跳转',
                      },
                      value: '_parent',
                    },
                    {
                      title: {
                        type: 'i18n',
                        'en-US': 'Top-level window jump',
                        'zh-CN': '顶层窗口跳转',
                      },
                      value: '_top',
                    },
                  ],
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
            condition: {
              type: 'JSFunction',
              value:
                'target => !!target.getProps().getPropValue("href")?.trim()',
            },
          },
        ],
      },
      {
        title: {
          type: 'i18n',
          'en-US': 'exterior',
          'zh-CN': '外观',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'type',
            title: {
              label: 'type',
              tip: 'set button type',
            },
            propType: {
              type: 'oneOf',
              value: [
                'primary',
                'default',
                'ghost',
                'dashed',
                'danger',
                'link',
                'text',
              ],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: 'primary button',
                      value: 'primary',
                    },
                    {
                      title: 'default button',
                      value: 'default',
                    },
                    {
                      title: 'dashed button',
                      value: 'dashed',
                    },
                    {
                      title: 'danger button',
                      value: 'danger',
                    },
                    {
                      title: 'link button',
                      value: 'link',
                    },
                    {
                      title: 'text button',
                      value: 'text',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'size',
            title: {
              label: 'size',
              tip: 'set button size',
            },
            propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'large',
                      value: 'large',
                    },
                    {
                      title: 'middle',
                      value: 'middle',
                    },
                    {
                      title: 'small',
                      value: 'small',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'middle',
          },
          {
            name: 'shape',
            title: {
              label: 'shape',
              tip: 'shape | Set button shape, optional value is `circle`, `round` or not set',
            },
            propType: { type: 'oneOf', value: ['default', 'circle', 'round'] },
            defaultValue: 'default',
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'default',
                      value: 'default',
                    },
                    {
                      title: 'circle',
                      value: 'circle',
                    },
                    {
                      title: 'round',
                      value: 'round',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'icon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'icon',
                'zh-CN': '图标',
              },
              tip: 'icon | Set the icon component of the button',
            },
            propType: { type: 'oneOfType', value: ['node'] },
            setter: [
              {
                componentName: 'SlotSetter',
                initialValue: {
                  type: 'JSSlot',
                  value: [
                    {
                      componentName: 'Icon',
                      props: {
                        type: 'SmileOutlined',
                        size: 20,
                        rotate: 0,
                        spin: false,
                      },
                    },
                  ],
                },
                defaultValue: null,
              },
            ],
          },
          {
            name: 'rightIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Right icon',
                'zh-CN': '右侧图标',
              },
              tip: 'icon | Set the icon component of the button',
            },
            propType: { type: 'oneOfType', value: ['node'] },
            setter: [
              {
                componentName: 'SlotSetter',
                initialValue: {
                  type: 'JSSlot',
                  value: [
                    {
                      componentName: 'Icon',
                      props: {
                        type: 'SmileOutlined',
                        size: 20,
                        rotate: 0,
                        spin: false,
                      },
                    },
                  ],
                },
                defaultValue: null,
              },
            ],
          },
          {
            name: 'block',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'adaptive',
                'zh-CN': '自适应',
              },
              tip: {
                type: 'i18n',
                'en-US':
                  'block | Option to adjust button width to its parent width',
                'zh-CN': 'block | 将按钮宽度调整为其父宽度的选项',
              },
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'danger',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'danger button',
                'zh-CN': '危险按钮',
              },
              tip: {
                type: 'i18n',
                'en-US': 'danger | set hazard button',
                'zh-CN': 'danger | 设置危险按钮',
              },
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'ghost',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'ghost attribute',
                'zh-CN': '幽灵属性',
              },
              tip: {
                type: 'i18n',
                'en-US':
                  'ghost | Ghost property to make button background transparent',
                'zh-CN': 'ghost | 幽灵属性，使按钮背景透明',
              },
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
        ],
      },

      {
        title: {
          type: 'i18n',
          'en-US': 'state',
          'zh-CN': '状态',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'loading',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'loading status',
                'zh-CN': '载入状态',
              },
              tip: {
                type: 'i18n',
                'en-US': 'loading | Set button loading state',
                'zh-CN': 'loading | 设置按钮载入状态',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
          },
          {
            name: 'disabled',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Whether to disable',
                'zh-CN': '是否禁用',
              },
              tip: {
                type: 'i18n',
                'en-US': 'disabled | Is it disabled',
                'zh-CN': 'disabled | 是否为禁用状态',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
    component: {},
  },
};

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