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

const TreeSelectMeta: IPublicTypeComponentMetadata = {
  componentName: 'TreeSelect',
  title: 'TreeSelect',
  group: '原子组件',
  category: '选择类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.2',
    exportName: 'TreeSelect',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'treeData',
        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: 'placeholder',
        title: { label: '默认文字', tip: '默认文字' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'value',
        title: { label: '当前值', tip: '当前值' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'treeLine',
        title: { label: '线性样式' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'allowClear',
        title: { label: '支持清除', tip: '是否允许清除' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'autoClearSearchValue',
        title: {
          label: '自动清空搜索',
          tip: '当多选模式下值被选择，自动清空搜索框',
        },
        propType: 'bool',
        defaultValue: true,
        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: 'dropdownMatchSelectWidth',
        title: {
          label: '下拉列表同款',
          tip: '下拉菜单和选择器同宽',
        },
        propType: 'bool',
        setter: 'BoolSetter',
      },

      {
        name: 'filterTreeNode',
        title: {
          label: '筛选节点',
          tip:
            '是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值',
        },
        propType: {
          type: 'oneOfType',
          value: ['bool', 'func'],
        },
      },
      {
        name: 'labelInValue',
        title: {
          label: '值包含标签',
          tip:
            '是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式',
        },
        propType: 'bool',
        defaultValue: true,
        setter: 'BoolSetter',
      },

      {
        name: 'treeCheckable',
        title: { label: '显示勾选框', tip: '显示勾选框' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'treeDefaultExpandAll',
        title: { label: '默认展开所有树节点', tip: '默认展开所有树节点' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        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: 'onChange',
        },
        {
          name: 'onSearch',
        },
        {
          name: 'onSelect',
        },
        {
          name: 'onTreeExpand',
        },
      ],
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '下拉树控件',
    screenshot: require('./__screenshots__/tree-select.png'),
    schema: {
      componentName: 'TreeSelect',
      props: {
        treeData: [
          {
            label: 'parent 0',
            value: '0-0',
            children: [
              { label: 'leaf 0-0', value: '0-0-0', isLeaf: true },
              { label: 'leaf 0-1', value: '0-0-1', isLeaf: true },
            ],
          },
          {
            label: 'parent 1',
            value: '0-1',
            children: [
              { label: 'leaf 1-0', value: '0-1-0', isLeaf: true },
              { label: 'leaf 1-1', value: '0-1-1', isLeaf: true },
            ],
          },
        ],
        placeholder: '请选择',
        style: {
          width: '100%',
        },
      },
    },
  },
];

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