import snippets from './snippets';
import {
  formItemGeneralDataGroup,
  getFormItemGeneralInfoGroup,
  getFormItemValidateGroup,
  generalItemMap,
} from '../_utils/defaultSchema';

export default {
  snippets,
  componentName: 'FormItemInputNumber',
  title: '数字输入',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormItemInputNumber',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    formItemGeneralDataGroup,
    getFormItemGeneralInfoGroup([
      generalItemMap['label'],
      generalItemMap['placeholder'],
      generalItemMap['tooltip'],
      generalItemMap['extra'],
      generalItemMap['hideLabel'],
      generalItemMap['renderMode'],
      {
        name: 'defaultValue',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Default value',
            'zh-CN': '默认值',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Default value',
            'zh-CN': '默认值',
          },
        },
        propType: 'string',
        setter: 'NumberSetter',
      },
      {
        name: 'addonAfter',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Unit',
            'zh-CN': '单位',
          },
          tip: {
            type: 'i18n',
            'en-US': 'The unit displayed after the input',
            'zh-CN': '输入框后显示的单位',
          },
        },
        propType: 'string',
        setter: 'PisellI18nSetter',
      },
      {
        name: 'useThousandsSeparator',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Thousand Separator',
            'zh-CN': '千位分隔符',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Format number with thousand separator',
            'zh-CN': '使用千位分隔符格式化数字',
          },
        },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'allowNegative',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allow Negative',
            'zh-CN': '允许负数',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Whether to allow negative numbers',
            'zh-CN': '是否允许输入负数',
          },
        },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
        extraProps: {
          setValue(target: any, value: any) {
            if (!value) {
              target.getProps().setPropValue('min', 0);
            } else {
              target.getProps().setPropValue('min', undefined);
            }
          }
        }
      },
      {
        name: 'precision',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Decimal Places',
            'zh-CN': '小数位数',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Number of decimal places',
            'zh-CN': '数值精度,保留小数点后几位',
          },
        },
        propType: 'number',
        defaultValue: 0,
        setter: 'NumberSetter',
      },
      {
        name: 'step',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Step',
            'zh-CN': '步长',
          },
          tip: {
            type: 'i18n',
            'en-US': 'The number to which the current value is increased or decreased',
            'zh-CN': '每次改变步数，可以为小数',
          },
        },
        propType: 'number',
        defaultValue: 1,
        setter: 'NumberSetter',
      },
      // {
      //   name: 'previewFormatter',
      //   title: {
      //     label: {
      //       type: 'i18n',
      //       'en-US': 'Number Format',
      //       'zh-CN': '数值格式化',
      //     },
      //     tip: {
      //       type: 'i18n',
      //       'en-US': 'Format the display value',
      //       'zh-CN': '格式化展示值,如大数字缩写 1000 -> 1k',
      //     },
      //   },
      //   propType: {
      //     type: 'oneOf',
      //     value: ['none', 'thousand', 'million', 'billion']
      //   },
      //   defaultValue: 'none',
      //   setter: {
      //     componentName: 'SelectSetter',
      //     props: {
      //       options: [
      //         {
      //           title: '无',
      //           value: 'none'
      //         },
      //         {
      //           title: '千',
      //           value: 'thousand'
      //         },
      //         {
      //           title: '百万',
      //           value: 'million'
      //         },
      //         {
      //           title: '十亿',
      //           value: 'billion'
      //         }
      //       ]
      //     }
      //   }
      // },
    ]),
    getFormItemValidateGroup([
      generalItemMap['requiredobj'],
      generalItemMap['minobj'],
      generalItemMap['maxobj'],
      generalItemMap['minLengthobj'],
      generalItemMap['maxLengthobj'],
    ]),
  ],
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'autoFocus',
      title: { label: '自动聚焦', tip: '自动获取焦点' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'placeholder',
      title: { label: '占位提示', tip: '占位提示' },
      propType: 'string',
      defaultValue: '请输入',
      setter: 'PisellI18nSetter',
    },
    {
      name: 'controls',
      title: { label: '是否显示增减按钮', tip: '是否显示增减按钮' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'bordered',
      title: { label: '显示边框', tip: '是否有边框' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'type',
      title: {
        label: 'input类型',
        tip: '声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")',
      },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'addonAfter',
      title: { label: '后置标签', tip: '后置标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
      setter: ['PisellI18nSetter', 'SlotSetter'],
    },
    {
      name: 'addonBefore',
      title: { label: '前置标签', tip: '前置标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
      setter: ['PisellI18nSetter', 'SlotSetter'],
    },
    // {
    //   name: 'formatter',
    //   title: {
    //     label: '指定输入框展示值的格式',
    //     tip: '指定输入框展示值的格式',
    //   },
    //   propType: 'func',
    // },
    {
      name: 'max',
      title: { label: '最大值', tip: '最大值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'min',
      title: { label: '最小值', tip: '最小值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'precision',
      title: { label: '数值精度', tip: '数值精度' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    // {
    //   name: 'decimalSeparator',
    //   title: { label: '小数点', tip: '小数点' },
    //   propType: 'string',
    // },
    {
      name: 'size',
      title: { label: '尺寸', tip: '输入框大小' },
      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: '大',
              value: 'large',
            },
            {
              title: '中',
              value: 'middle',
            },
            {
              title: '小',
              value: 'small',
            },
          ],
        },
      },
      defaultValue: 'middle',
    },
    {
      name: 'step',
      title: { label: '单步长', tip: '每次改变步数' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'onChange',
      title: { label: '变化回调', tip: '变化回调' },
      propType: 'func',
    },
    {
      name: 'onPressEnter',
      title: { label: '按下回车的回调', tip: '按下回车的回调' },
      propType: 'func',
    },
    {
      name: 'onFocus',
      title: { label: '获取焦点回调', tip: '获取焦点回调' },
      propType: 'func',
    },
    {
      name: 'onKeyDown',
      title: { label: '按键按下时的回调', tip: '按键按下时的回调' },
      propType: 'func',
    },
    {
      name: 'onKeyPress',
      title: { label: '按键按下后的回调', tip: '按键按下之后释放之前的回调' },
      propType: 'func',
    },
    {
      name: 'onKeyUp',
      title: { label: '按键释放回调', tip: '按键释放之后的回调' },
      propType: 'func',
    },
    {
      name: 'onBlur',
      title: { label: '失去焦点回调', tip: '失去焦点回调' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value,${extParams}){\n// 变化回调\nconsole.log('onChange',value);}",
        },
        {
          name: 'onPressEnter',
          template:
            "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}",
        },
        {
          name: 'onFocus',
          template:
            "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}",
        },
        {
          name: 'onKeyDown',
          template:
            "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}",
        },
        {
          name: 'onKeyPress',
          template:
            "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}",
        },
        {
          name: 'onKeyUp',
          template:
            "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}",
        },
        {
          name: 'onBlur',
          template:
            "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}",
        },
      ],
    },
  },
};