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

export default {
  snippets,
  componentName: 'FormItemDatePicker',
  title: '日期输入',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormItemDatePicker',
    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': '默认值',
          },
        },
        setter: 'DateSetter',
      },
      {
        name: 'format',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Format',
            'zh-CN': '格式',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Date format',
            'zh-CN': '日期格式',
          },
        },
        propType: 'string',
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'YYYY',
                value: 'YYYY',
              },
              {
                title: 'YYYY-MM',
                value: 'YYYY-MM',
              },
              {
                title: 'YYYY-MM-DD',
                value: 'YYYY-MM-DD',
              },
              {
                title: 'MM/DD/YYYY',
                value: 'MM/DD/YYYY',
              },
              {
                title: 'DD/MM/YYYY',
                value: 'DD/MM/YYYY',
              },
            ],
          },
        },
        defaultValue: 'YYYY-MM-DD',
      },
      {
        name: 'showTime',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Show Time',
            'zh-CN': '显示时间',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Whether to show time picker',
            'zh-CN': '是否显示时间选择器',
          },
        },
        propType: 'bool',
        setter: 'BoolSetter',
        defaultValue: false,
        extraProps: {
          setValue: (target: any, value: any) => {
            if (value) {
              return target.getProps().setPropValue('showTime.format', 'HH:mm');
            }

            return target.getProps().setPropValue('showTime', value);
          },
          getValue: (target: any) => {
            return !!target.getProps().getPropValue('showTime');
          },
        },
      },
      {
        name: 'showTime.format',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Time Format',
            'zh-CN': '时间格式',
          },
          tip: {
            type: 'i18n',
            'en-US': 'Time format',
            'zh-CN': '时间格式',
          },
        },
        propType: 'string',
        condition: (target: any) => {
          return target.getProps().getPropValue('showTime');
        },
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'HH:mm:ss',
                value: 'HH:mm:ss',
              },
              {
                title: 'HH:mm',
                value: 'HH:mm',
              },
              {
                title: 'HH',
                value: 'HH',
              },
            ],
          },
        },
        defaultValue: 'HH:mm',
      },
      {
        name: "submitFormat",
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Submit Format',
            'zh-CN': '提交格式',
          },
        },
        propType: 'string',
        setter: 'StringSetter',
        defaultValue: 'YYYY-MM-DD HH:mm:ss',
      },
    ]),
    getFormItemValidateGroup([generalItemMap['requiredobj']]),
  ],
  configure: {
    props: [
      {
        title: '值设置',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'defaultValue',
            title: {
              label: '默认值',
              tip: 'defaultValue | 默认值',
            },
            propType: 'date',
            setter: 'DateSetter',
          },
          {
            name: 'value',
            title: {
              label: '当前值',
              tip: 'value | 当前值',
            },
            propType: 'date',
            setter: 'DateSetter',
          },
        ],
      },
      {
        title: '功能选项',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'size',
            title: {
              label: '尺寸',
              tip: 'size | 输入框大小',
            },
            propType: {
              type: 'oneOf',
              value: ['large', 'middle', 'small'],
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '大',
                    value: 'large',
                  },
                  {
                    title: '中',
                    value: 'middle',
                  },
                  {
                    title: '小',
                    value: 'small',
                  },
                ],
              },
            },
            defaultValue: 'middle',
          },
          {
            name: 'picker',
            title: {
              label: '日期类型',
              tip: 'picker | 选择器日期类型',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: '日期',
                    value: 'date',
                  },
                  {
                    title: '周',
                    value: 'week',
                  },
                  {
                    title: '月份',
                    value: 'month',
                  },
                  {
                    title: '季度',
                    value: 'quarter',
                  },
                  {
                    title: '年份',
                    value: 'year',
                  },
                ],
              },
            },
            propType: {
              type: 'oneOf',
              value: ['date', 'week', 'month', 'quarter', 'year'],
            },
          },
          {
            name: 'format',
            title: {
              label: '日期格式',
              tip: 'format | 设置日期格式',
            },
            propType: 'string',
            defaultValue: 'YYYY-MM-DD',
            setter: 'StringSetter',
          },
          {
            name: 'placeholder',
            title: {
              label: '提示文字',
              tip: 'placeholder | 输入框提示文字',
            },
            propType: 'string',
            setter: 'PisellI18nSetter',
          },
          {
            name: 'allowClear',
            title: {
              label: '支持清除',
              tip: 'allowClear | 是否允许清除',
            },
            propType: 'bool',
            defaultValue: true,
            setter: 'BoolSetter',
          },
          {
            name: 'bordered',
            title: {
              label: '显示边框',
              tip: 'bordered | 是否有边框',
            },
            propType: 'bool',
            defaultValue: true,
            setter: 'BoolSetter',
          },
          {
            name: 'className',
            title: { label: '选择器类名', tip: '选择器类名' },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'showToday',
            title: {
              label: '展示今天按钮',
              tip: 'showToday | 是否展示今天按钮',
            },
            propType: 'bool',
            defaultValue: true,
            setter: 'BoolSetter',
          },
          {
            name: 'autoFocus',
            title: {
              label: '自动聚焦',
              tip: 'autoFocus | 自动获取焦点',
            },
            propType: 'bool',
            defaultValue: false,
            setter: 'BoolSetter',
          },
          {
            name: 'disabled',
            title: {
              label: '是否禁用',
              tip: 'disabled | 是否为禁用状态',
            },
            propType: 'bool',
            defaultValue: false,
            setter: 'BoolSetter',
          },
          {
            name: 'inputReadOnly',
            title: {
              label: '是否只读',
              tip: 'inputReadOnly | 避免在移动设备上打开虚拟键盘',
            },
            propType: 'bool',
            defaultValue: false,
            setter: 'BoolSetter',
          },
          {
            name: 'showTime',
            title: {
              label: '时间选择',
              tip: 'showTime | 是否能选择时间',
            },
            propType: 'bool',
            defaultValue: false,
            setter: 'BoolSetter',
          },
        ],
      },
      {
        title: '高级',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'disabledDate',
            title: {
              label: '不可选日期',
              tip: 'disabledDate | 不可选择的日期',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'disabledDate(currentDate,${extParams}){\n// 设置不可选择的日期\nreturn true\n}',
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
      // {
      //   name: 'dropdownClassName',
      //   title: {
      //     label: '额外的弹出日历 className',
      //     tip: '额外的弹出日历 className',
      //   },
      //   setter: 'ClassNameSetter',
      // },
      // {
      //   name: 'popupStyle',
      //   title: { label: '额外的弹出日历样式', tip: '额外的弹出日历样式' },
      //   setter: 'JsonSetter',
      // },
      // {
      //   name: 'suffixIcon',
      //   title: { label: '自定义的选择框后缀图标', tip: '自定义的选择框后缀图标' },
      //   setter: 'IconSetter',
      // },
      // {
      //   name: 'style',
      //   title: { label: '自定义输入框样式', tip: '自定义输入框样式' },
      //   setter: 'JsonSetter',
      // },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(date,dateString,${extParams}){\n// 时间发生变化的回调\nconsole.log('onChange',date,dateString);}",
        },
        {
          name: 'onOpenChange',
          template:
            "onOpenChange(open,${extParams}){\n// 弹出日历和关闭日历的回调\nconsole.log('onOpenChange',open);}",
        },
        {
          name: 'onPanelChange',
          template:
            "onPanelChange(value,mode,${extParams}){\n// 日历面板切换的回调\nconsole.log('onPanelChange',value,mode);}",
        },
      ],
    },
  },
};