import { uuid } from '../_utils/utils';
import {
  formItemGeneralDataGroup,
  generalItemMap,
  getFormItemGeneralInfoGroup,
  formItemGeneralOptionTypeGroup,
  getFormItemValidateGroup,
  getFormItemGeneralAppearanceGroup,
} from '../_utils/defaultSchema';

export default {
  componentName: 'FormItemTabs',
  title: '选项卡',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormItemTabs',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    // 数据分组
    formItemGeneralDataGroup,
    // 信息分组
    getFormItemGeneralInfoGroup([
      generalItemMap['label'],
      generalItemMap['tooltip'],
      generalItemMap['extra'],
      generalItemMap['hideLabel'],
      generalItemMap['renderMode'],
      generalItemMap['defaultValue'],
    ]),
    // 选项类型分组
    formItemGeneralOptionTypeGroup,
    // 校验分组
    getFormItemValidateGroup([generalItemMap['requiredobj']]),
    // 外观分组
    getFormItemGeneralAppearanceGroup([]),
  ],
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认选中的选项值' },
      propType: { type: 'oneOfType', value: ['string', 'number'] },
      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
      supportVariable: true,
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前选中的选项值（受控）' },
      propType: { type: 'oneOfType', value: ['string', 'number'] },
      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
      supportVariable: true,
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否禁用整个选项卡组件' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'options',
      title: { label: '选项列表', tip: '配置各选项卡的标签和对应值' },
      propType: {
        type: 'arrayOf',
        value: {
          type: 'shape',
          value: [
            {
              name: 'label',
              propType: 'string',
              description: '选项名',
              defaultValue: '选项名',
            },
            {
              name: 'value',
              propType: { type: 'oneOfType', value: ['string', 'number'] },
              description: '选项值',
              defaultValue: '选项值',
            },
            {
              name: 'disabled',
              propType: 'bool',
              description: '是否禁用该选项',
              defaultValue: false,
            },
          ],
        },
      },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'label',
                    title: '选项名',
                    setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
                    isRequired: true,
                  },
                  {
                    name: 'value',
                    title: '选项值',
                    setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
                    isRequired: true,
                  },
                  {
                    name: 'disabled',
                    title: '是否禁用',
                    setter: 'BoolSetter',
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                label: '选项名',
                value: uuid(),
                disabled: false,
              };
            },
          },
        },
      },
    },
    {
      name: 'onChange',
      title: { label: '变化时回调', tip: '切换选项时触发的回调函数' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value,${extParams}){\n// 切换选项时回调\nconsole.log('onChange', value);}",
        },
      ],
    },
  },
  snippets: [
    {
      title: '选项卡',
      screenshot: '',
      schema: {
        componentName: 'FormItemTabs',
        props: {
          optionSourceType: 'custom',
          options: [
            { label: '选项A', value: 'A' },
            { label: '选项B', value: 'B' },
            { label: '选项C', value: 'C' },
          ],
        },
      },
    },
  ],
};