import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
import { AntdIconSetter } from '../../../materials/lowcode/_setters';
import snippets from './snippets';

const SelectHolderMeta: ComponentMetadata = {
  componentName: "SelectHolder",
  title: "选择持有人",
  docUrl: "",
  screenshot: "",
  category: "数据展示",
  devMode: "proCode",
  npm: {
    package: "@pisell/private-materials",
    version: "1.0.4",
    exportName: "SelectHolder",
    main: "src/index.ts",
    destructuring: true,
    subName: ""
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'dataSource',
            'zh-CN': '数据源',
          },
        },
        name: 'dataSource',
        setter: {
          componentName: 'JsonSetter',
        },
      },
      {
        title: { label: '选中的值', tip: 'Array<any> | 选中的值' },
        name: 'value',
        setter: {
          componentName: 'ObjectSetter',
        },
      },
      {
        title: '录入方式',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'modalConfig.title',
            title: '标题文案',
            setter: 'StringSetter',
            defaultValue: 'Who would you like to book this event for?',
          },
          {
            name: 'modalConfig.confirmText',
            title: '按钮文案',
            setter: 'StringSetter',
            defaultValue: 'Confirm',
          },
          {
            name: 'modalConfig.showClose',
            title: { label: '显示弹窗关闭', tip: 'showClose | 显示弹窗关闭' },
            setter: 'BoolSetter',
          },
        ],
      },
      {
        title: '字段展示',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'displayConfig.showAvatar',
            title: { label: '显示图像', tip: 'showAvatar | 显示图像' },
            setter: 'BoolSetter',
          },
          {
            name: 'displayConfig.showTitle',
            title: { label: '显示名称', tip: 'showTitle | 显示名称' },
            setter: 'BoolSetter',
          },
          {
            name: 'displayConfig.showSubtitle',
            title: { label: '显示次级标题', tip: 'showSubtitle | 显示次级标题' },
            setter: 'BoolSetter',
          },
          {
            name: 'displayConfig.isSkipable',
            title: { label: '可跳过', tip: 'isSkipable | 可跳过' },
            setter: 'BoolSetter',
          },
          {
            name: 'displayConfig.direction',
            title: { label: '展示方向', tip: '展示方向' },
            propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { label: '水平', value: 'horizontal' },
                  { label: '垂直', value: 'vertical' },
                ],
              },
            },
          },
          {
            name: 'displayConfig.selectType',
            title: { label: '选择类型', tip: '选择类型' },
            propType: { type: 'oneOf', value: ['single', 'multiple'] },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { label: '单选', value: 'single' },
                  { label: '多选', value: 'multiple' },
                ],
              },
            },
          },
          {
            name: 'displayConfig.showExtraFields',
            title: { label: '增加字段', tip: 'showExtraFields | 增加字段' },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'displayConfig.extraFields',
            title: { label: '额外字段', tip: 'extraFields | 额外字段' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'label',
                          title: '标签',
                          setter: 'PisellI18nSetter',
                          important: true,
                        },
                        {
                          name: 'value',
                          title: 'key',
                          setter: 'StringSetter',
                          important: true,
                        },
                        {
                          name: 'isShowLabel',
                          title: '显示标签',
                          setter: 'BoolSetter',
                        },
                        {
                          name: 'isShowValue',
                          title: '显示key',
                          setter: 'BoolSetter',
                        },
                        // {
                        //   name: 'icon',
                        //   title: 'icon选择',
                        //   setter: AntdIconSetter,
                        // },
                        // {
                        //   name: 'iconSize',
                        //   title: 'icon大小',
                        //   setter: ['NumberSetter'],
                        // },
                        // {
                        //   name: 'iconColor',
                        //   title: 'icon颜色',
                        //   setter: 'ColorSetter',
                        // },
                      ],
                    },
                  },
                  initialValue: {
                    isShowLabel: false,
                    isShowValue: true
                  }
                },
              },
            },
            condition: (target: any) => target.getProps().getPropValue('displayConfig.showExtraFields'),
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onAdd',
          template:
            "onAdd(){\n// 创建新的回调函数\nconsole.log('onAdd');}",
        },
        {
          name: 'onClose',
          template:
            "onClose(){\n// 关闭弹窗回调函数\nconsole.log('onClose');}",
        },
        {
          name: 'onConfirm',
          template:
            "onConfirm(checkedValue,${extParams}){\n// 确认回调函数\nconsole.log('onConfirm');}",
        },
        {
          name: 'onSkip',
          template:
            "onSkip(){\n// 跳过回调函数\nconsole.log('onSkip');}",
        },
      ],
    },
    component: {}
  }
};

export default {
  ...SelectHolderMeta,
  snippets
};