import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellSingleLineText',
  title: '单行文本',
  category: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellSingleLineText',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic',
            'zh-CN': '基础配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'mode',
            title: {
              label: '状态模式',
              tip: 'mode | 组件的状态模式，只读态或编辑态',
            },
            propType: { type: 'oneOf', value: ['read', 'edit'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '只读',
                      value: 'read',
                    },
                    {
                      title: '编辑',
                      value: 'edit',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'edit',
          },
          {
            name: 'value',
            title: {
              label: '当前值',
              tip: 'value | 输入框的值（受控模式）',
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
          },
          {
            name: 'defaultValue',
            title: {
              label: '默认值',
              tip: 'defaultValue | 输入框的默认值（非受控模式）',
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter'],
          },
          {
            name: 'placeholder',
            title: {
              label: '占位文本',
              tip: 'placeholder | 输入框占位文本',
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter'],
          },
          {
            name: 'disabled',
            title: {
              label: '是否禁用',
              tip: 'disabled | 是否禁用状态',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Display',
            'zh-CN': '展示配置',
          },
          tip: '只读态的展示配置',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'displayVariant',
            title: {
              label: '展示样式',
              tip: 'displayVariant | 只读态的展示样式变体',
            },
            propType: { type: 'oneOf', value: ['text', 'link', 'badge', 'tag'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '普通文本',
                      value: 'text',
                    },
                    {
                      title: '超链接',
                      value: 'link',
                    },
                    {
                      title: '徽标',
                      value: 'badge',
                    },
                    {
                      title: '标签',
                      value: 'tag',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'text',
          },
          {
            name: 'badgeStatus',
            title: {
              label: '徽标状态',
              tip: 'badgeStatus | 徽标状态（仅 displayVariant=badge 时有效）',
            },
            propType: {
              type: 'oneOf',
              value: ['success', 'processing', 'default', 'error', 'warning'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    { title: '成功', value: 'success' },
                    { title: '处理中', value: 'processing' },
                    { title: '默认', value: 'default' },
                    { title: '错误', value: 'error' },
                    { title: '警告', value: 'warning' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'default',
            condition: {
              type: 'JSFunction',
              value: "target => target.getProps().getPropValue('displayVariant') === 'badge'",
            },
          },
          {
            name: 'tagColor',
            title: {
              label: '标签颜色',
              tip: 'tagColor | 标签颜色（仅 displayVariant=tag 时有效）',
            },
            propType: 'string',
            setter: ['ColorSetter', 'VariableSetter'],
            condition: {
              type: 'JSFunction',
              value: "target => target.getProps().getPropValue('displayVariant') === 'tag'",
            },
          },
          {
            name: 'tagClosable',
            title: {
              label: '标签可关闭',
              tip: 'tagClosable | 标签是否可关闭（仅 displayVariant=tag 时有效）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
            condition: {
              type: 'JSFunction',
              value: "target => target.getProps().getPropValue('displayVariant') === 'tag'",
            },
          },
          {
            name: 'ellipsis',
            title: {
              label: '超出省略',
              tip: 'ellipsis | 文本超出容器宽度时是否省略显示',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'showTooltip',
            title: {
              label: '显示提示',
              tip: 'showTooltip | 鼠标悬停时是否显示完整内容',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'fontSize',
            title: {
              label: '字号',
              tip: 'fontSize | 文本字号，如 14 或 "14px"',
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
          },
          {
            name: 'fontWeight',
            title: {
              label: '字重',
              tip: 'fontWeight | 文本字重，如 600 或 "bold"',
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
          },
          {
            name: 'color',
            title: {
              label: '文本颜色',
              tip: 'color | 文本颜色',
            },
            propType: 'string',
            setter: ['ColorSetter', 'VariableSetter'],
          },
          {
            name: 'textAlign',
            title: {
              label: '对齐方式',
              tip: 'textAlign | 文本对齐方式',
            },
            propType: { type: 'oneOf', value: ['left', 'center', 'right'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '左对齐',
                      value: 'left',
                    },
                    {
                      title: '居中',
                      value: 'center',
                    },
                    {
                      title: '右对齐',
                      value: 'right',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'left',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Edit',
            'zh-CN': '编辑配置',
          },
          tip: '编辑态的配置',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'maxLength',
            title: {
              label: '最大长度',
              tip: 'maxLength | 输入框最大长度',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'showCount',
            title: {
              label: '显示字数',
              tip: 'showCount | 是否显示字数统计',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'allowClear',
            title: {
              label: '显示清除',
              tip: 'allowClear | 是否显示清空按钮',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'autoFocus',
            title: {
              label: '自动聚焦',
              tip: 'autoFocus | 是否自动聚焦',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'prefix',
            title: {
              label: '前缀',
              tip: 'prefix | 前缀图标或文本',
            },
            propType: 'node',
            setter: ['PisellI18nSetter', 'SlotSetter'],
          },
          {
            name: 'suffix',
            title: {
              label: '后缀',
              tip: 'suffix | 后缀图标或文本',
            },
            propType: 'node',
            setter: ['PisellI18nSetter', 'SlotSetter'],
          },
          {
            name: 'addonBefore',
            title: {
              label: '前置标签',
              tip: 'addonBefore | 前置标签',
            },
            propType: 'node',
            setter: ['PisellI18nSetter', 'SlotSetter'],
          },
          {
            name: 'addonAfter',
            title: {
              label: '后置标签',
              tip: 'addonAfter | 后置标签',
            },
            propType: 'node',
            setter: ['PisellI18nSetter', 'SlotSetter'],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Validation',
            'zh-CN': '校验配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'required',
            title: {
              label: '是否必填',
              tip: 'required | 是否为必填项',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'minLength',
            title: {
              label: '最小长度',
              tip: 'minLength | 最小字符数',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'pattern',
            title: {
              label: '正则校验',
              tip: 'pattern | 正则表达式校验规则',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'errorMessage',
            title: {
              label: '错误提示',
              tip: 'errorMessage | 自定义错误提示信息',
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
          },
          {
            name: 'validateTrigger',
            title: {
              label: '校验时机',
              tip: 'validateTrigger | 校验触发时机',
            },
            propType: { type: 'oneOf', value: ['onChange', 'onBlur', 'both'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '输入时',
                      value: 'onChange',
                    },
                    {
                      title: '失焦时',
                      value: 'onBlur',
                    },
                    {
                      title: '两者都',
                      value: 'both',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'onBlur',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'className',
            title: {
              label: '样式类名',
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'style',
            title: {
              label: '自定义样式',
              tip: 'style | 自定义样式对象',
            },
            propType: 'object',
            setter: 'StyleSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange', value);}",
        },
        {
          name: 'onBlur',
          template: "onBlur(value,${extParams}){\n// 失焦回调\nconsole.log('onBlur', value);}",
        },
        {
          name: 'onFocus',
          template: "onFocus(${extParams}){\n// 聚焦回调\nconsole.log('onFocus');}",
        },
        {
          name: 'onPressEnter',
          template:
            "onPressEnter(value,${extParams}){\n// 按下回车键的回调\nconsole.log('onPressEnter', value);}",
        },
        {
          name: 'onValidate',
          template:
            "onValidate(isValid, errors,${extParams}){\n// 校验回调\nconsole.log('onValidate', isValid, errors);}",
        },
        {
          name: 'onLinkClick',
          template:
            "onLinkClick(${extParams}){\n// 超链接点击回调（displayVariant=link 时）\nconsole.log('onLinkClick');}",
        },
        {
          name: 'onTagClose',
          template:
            "onTagClose(${extParams}){\n// 标签关闭回调（displayVariant=tag 时）\nconsole.log('onTagClose');}",
        },
      ],
    },
    component: {},
  },
};