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

export default {
  snippets,
  componentName: 'FormItemUpload',
  title: '多媒体文件上传',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormItemUpload',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    formItemGeneralDataGroup,
    getFormItemGeneralInfoGroup([
      generalItemMap['label'],
      generalItemMap['tooltip'],
      generalItemMap['extra'],
      generalItemMap['hideLabel'],
      generalItemMap['renderMode'],
    ]),
    {
      title: {
        type: 'i18n',
        'en-US': 'Operation',
        'zh-CN': '操作',
      },
      display: 'accordion',
      type: 'group',
      items: [
        // {
        //   name: 'allowMediaLibrary',
        //   title: {
        //     type: 'i18n',
        //     'en-US': 'Allow Media Library',
        //     'zh-CN': '允许从媒体库上传',
        //   },
        //   propType: 'bool',
        //   defaultValue: true,
        //   setter: 'BoolSetter'
        // },
        // {
        //   name: 'allowLocalUpload',
        //   title: {
        //     type: 'i18n',
        //     'en-US': 'Allow Local Upload',
        //     'zh-CN': '允许从本地上传',
        //   },
        //   propType: 'bool',
        //   defaultValue: true,
        //   setter: 'BoolSetter'
        // },
        {
          name: 'allowPreview',
          title: {
            type: 'i18n',
            'en-US': 'Allow Preview',
            'zh-CN': '允许预览',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'enableMultilingual',
          title: {
            type: 'i18n',
            'en-US': 'Allow Multilingual',
            'zh-CN': '允许多语言',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'allowCamera',
          title: {
            type: 'i18n',
            'en-US': 'Allow Camera',
            'zh-CN': '允许拍照',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
      ],
    },
    {
      title: {
        type: 'i18n',
        'en-US': 'Upload Settings',
        'zh-CN': '上传设置',
      },
      display: 'accordion',
      type: 'group',
      items: [
        // {
        //   name: 'maxSize',
        //   title: {
        //     type: 'i18n',
        //     'en-US': 'Max File Size(MB)',
        //     'zh-CN': '单文件最大上传大小(MB)',
        //   },
        //   propType: 'number',
        //   defaultValue: 3,
        //   setter: 'NumberSetter',
        // },
        {
          name: 'multiple',
          title: {
            type: 'i18n',
            'en-US': 'Allow Multiple Files',
            'zh-CN': '允许上传多个文件',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'minCount',
          title: {
            type: 'i18n',
            'en-US': 'Min File Count',
            'zh-CN': '最小上传文件个数',
          },
          propType: 'number',
          defaultValue: 1,
          setter: 'NumberSetter',
          condition: (target: any) => {
            return target.getProps().getPropValue('multiple');
          },
        },
        {
          name: 'maxCount',
          title: {
            type: 'i18n',
            'en-US': 'Max File Count',
            'zh-CN': '最大上传文件个数',
          },
          propType: 'number',
          defaultValue: 9,
          setter: 'PisellMediaMaxCountSetter',
          condition: (target: any) => {
            return target.getProps().getPropValue('multiple');
          },
        },
      ],
    },
    {
      title: {
        type: 'i18n',
        'en-US': 'File Types',
        'zh-CN': '文件类型',
      },
      display: 'accordion',
      type: 'group',
      items: [
        {
          name: 'enablePresetType',
          title: {
            type: 'i18n',
            'en-US': 'Enable Preset Types',
            'zh-CN': '启用预设类型',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'presetType',
          title: {
            type: 'i18n',
            'en-US': 'Preset Types',
            'zh-CN': '预设类型',
          },
          condition: (target: any) => {
            return target.getProps().getPropValue('enablePresetType');
          },
          setter: {
            componentName: 'PisellMediaPresetTypeSetter',
          },
          extraProps: {
            setValue(target: any, values: any) {
              const { value, options } = values;
              const presetTypeString: any[] = [];
              options.forEach((item: any) => {
                presetTypeString.push(
                  ...(item.extensions || []).map((item: any) => `.${item}`)
                );
              });
              target
                .getProps()
                .setPropValue('presetTypeString', presetTypeString);
              target.getProps().setPropValue('presetType', value);
            },
          },
        },
        {
          name: 'enableCustomType',
          title: {
            type: 'i18n',
            'en-US': 'Enable Custom Types',
            'zh-CN': '启用自定义类型',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'customType',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Custom Types',
              'zh-CN': '自定义类型',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Input file suffix, such as .pdf, and press Enter',
              'zh-CN': '输入文件后缀名，例如.pdf，并点击回车键',
            },
          },
          propType: 'string',
          condition: (target: any) => {
            return target.getProps().getPropValue('enableCustomType');
          },
          setter: {
            componentName: 'PisellSelectSetter',
            props: {
              options: [],
              mode: 'tags',
            },
          },
        },
      ],
    },
    getFormItemValidateGroup([generalItemMap['requiredobj']]),
  ],
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认内容' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'allowClear',
      title: { label: '支持清除', tip: '是否允许清除' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'bordered',
      title: { label: '显示边框', tip: '是否有边框' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'readOnly',
      title: { label: '是否只读', tip: '是否为只读状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'placeholder',
      title: { label: '占位提示', tip: '占位提示' },
      propType: 'string',
      defaultValue: '请输入',
      setter: 'PisellI18nSetter',
    },
    // {
    //   name: 'id',
    //   title: { label: '输入框ID', tip: '输入框的ID' },
    //   propType: 'string',
    // },
    {
      name: 'maxLength',
      title: { label: '最大长度', tip: '最大长度' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'size',
      title: { label: '控件大小', tip: '控件大小' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: '大',
              value: 'large',
            },
            {
              title: '中',
              value: 'middle',
            },
            {
              title: '小',
              value: 'small',
            },
          ],
        },
      },
      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
      defaultValue: 'middle',
    },
    {
      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: 'prefix',
      title: { label: '前缀', tip: '前缀' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
      setter: ['PisellI18nSetter', 'SlotSetter'],
    },
    {
      name: 'suffix',
      title: { label: '后缀', tip: '后缀' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
      setter: ['PisellI18nSetter', 'SlotSetter'],
    },
    {
      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',
    },
    {
      name: 'onClick',
      title: { label: '点击回调', tip: '点击回调' },
      propType: 'func',
    },
    {
      name: 'onClear',
      title: { label: '按下清除按钮的回调', tip: '按下清除按钮的回调' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}",
        },
        {
          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);}",
        },
        {
          name: 'onClick',
          template:
            "onClick(event,${extParams}){\n// 点击回调\nconsole.log('onClick',event);}",
        },
        {
          name: 'onClear',
          template:
            "onClear(event,${extParams}){\n// 按下清除按钮的回调\nconsole.log('onClear',event);}",
        },
      ],
    },
  },
};