import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const SelectMeta: IPublicTypeComponentMetadata = {
  componentName: 'Select',
  title: 'Select',
  group: '原子组件',
  category: '选择类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.2',
    exportName: 'Select',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'options',
        title: { label: '数据源', tip: '数据源' },
        setter: 'JsonSetter',
      },
      {
        name: 'defaultValue',
        title: { label: '默认值', tip: '默认选中值' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'borderRadius',
        title: { label: '边框圆角', tip: '针对border-radius的效果' },
        propType: 'string',
        setter: 'NumberSetter',
      },
      {
        name: 'value',
        title: { label: '当前值', tip: '当前值' },
        propType: 'string',
        setter: 'StringSetter',
      },
      // {
      //   name: 'options',
      //   title: { label: '可选项', tip: '可选项' },
      //   propType: {
      //     type: 'arrayOf',
      //     value: {
      //       type: 'shape',
      //       value: [
      //         {
      //           name: 'label',
      //           propType: 'string',
      //           description: '选项名',
      //           defaultValue: '选项名',
      //         },
      //         {
      //           name: 'value',
      //           propType: ['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: ['StringSetter', 'VariableSetter'],
      //                 isRequired: true,
      //               },
      //               {
      //                 name: 'value',
      //                 title: '选项值',
      //                 setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
      //                 isRequired: true,
      //               },
      //               {
      //                 name: 'disabled',
      //                 title: '是否禁用',
      //                 setter: ['BoolSetter', 'VariableSetter'],
      //               },
      //             ],
      //           },
      //         },
      //         initialValue: () => {
      //           return {
      //             label: '选项名',
      //             value: uuid(),
      //             disabled: false,
      //           };
      //         },
      //       },
      //     },
      //   },
      // },
      {
        name: 'allowClear',
        title: { label: '支持清除', tip: '是否允许清除' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'autoFocus',
        title: { label: '自动聚焦', tip: '默认获取焦点' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'defaultActiveFirstOption',
        title: { label: '高亮首个选项', tip: '是否默认高亮第一个选项' },
        propType: 'bool',
        defaultValue: true,
        setter: 'BoolSetter',
      },
      {
        name: 'disabled',
        title: { label: '是否禁用', tip: '是否为禁用状态' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'labelInValue',
        title: {
          label: '值包含label',
          tip: '把每个选项的 label 包装到 value 中',
        },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'mode',
        title: { label: '多选/单选', tip: '多选/单选' },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '单选',
                value: 'single',
              },
              {
                title: '多选',
                value: 'multiple',
              },
              {
                title: '任意内容',
                value: 'tags',
              },
            ],
          },
        },
        propType: { type: 'oneOf', value: ['single', 'multiple', 'tags'] },
      },
      {
        name: 'maxTagCount',
        title: { label: '最大tag数', tip: '最多显示多少个tag' },
        condition(target) {
          return target.getProps().getPropValue('mode') === 'tags';
        },
        propType: 'number',
      },
      {
        name: 'maxTagTextLength',
        title: { label: 'tag文本长度', tip: '最大显示的tag文本长度' },
        condition(target) {
          return target.getProps().getPropValue('mode') === 'tags';
        },
        propType: 'number',
      },
      {
        name: 'notFoundContent',
        title: { label: '搜索为空提示文案', tip: '搜索为空提示文案' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'placeholder',
        title: { label: '选择框默认文字', tip: '选择框默认文字' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'showArrow',
        title: { label: '是否显示下拉箭头', tip: '是否显示下拉小箭头' },
        propType: 'bool',
        setter: 'BoolSetter',
      },
      {
        name: 'showSearch',
        title: { label: '是否可搜索', tip: '是否可搜索' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        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: 'loading',
        title: { label: '加载中', tip: '加载中状态' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'bordered',
        title: { label: '显示边框', tip: '是否有边框' },
        propType: 'bool',
        defaultValue: true,
        setter: 'BoolSetter',
      },
      {
        name: 'filterOption',
        title: {
          label: '条件筛选',
          tip: '当value和lable值不一样时候 条件筛选',
        },
        propType: 'func',
        setter: [
          {
            componentName: 'FunctionSetter',
            props: {
              template:
                'filterOption(input, option){\nreturn (option?.label ?? "").toLowerCase().includes(input.toLowerCase())\n}\n',
            },
          },
          'VariableSetter',
        ],
      },

      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'state',
            'zh-CN': '自定义节点配置',
          },
        },
        name: 'fieldNames',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'label',
                      'zh-CN': 'label',
                    },
                  },
                  name: 'label',
                  setter: {
                    componentName: 'StringSetter',
                    isRequired: true,
                    initialValue: 'label',
                  },
                },
                {
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'value',
                      'zh-CN': 'value',
                    },
                  },
                  name: 'value',
                  setter: {
                    componentName: 'StringSetter',
                    isRequired: true,
                    initialValue: 'value',
                  },
                },
                {
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'children',
                      'zh-CN': 'children',
                    },
                  },
                  name: 'children',
                  setter: {
                    componentName: 'StringSetter',
                    isRequired: true,
                    initialValue: 'children',
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onCheck',
        },
        {
          name: 'onDragEnd',
        },
        {
          name: 'onDragEnter',
        },
        {
          name: 'onDragLeave',
        },
        {
          name: 'onDragOver',
        },
        {
          name: 'onDragStart',
        },
        {
          name: 'onDrop',
        },
        {
          name: 'onExpand',
        },
        {
          name: 'onLoad',
        },
        {
          name: 'onRightClick',
        },
        {
          name: 'onSelect',
        },
        {
          name: 'onChange',
        },
      ],
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '选择器',
    screenshot: require('./__screenshots__/select.png'),
    schema: {
      componentName: 'Select',
      props: {
        style: {
          width: '100%',
        },
        options: [
          {
            label: 'A',
            value: 'A',
          },
          {
            label: 'B',
            value: 'B',
          },
          {
            label: 'C',
            value: 'C',
          },
        ],
      },
    },
  },
];

export default {
  ...SelectMeta,
  snippets,
};