import pisellAvatarProps from './fragments/pisellAvatar';
import cardStyleProps from './fragments/cardStyle';
import nameStyleProps from './fragments/nameStyle';
import textStyleProps from './fragments/textStyle';
import { AntdIconSetter } from '@pisell/materials/lowcode/_setters';

const ContactInfoMeta = {
  componentName: 'ContactInfo',
  title: '联系信息',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.0',
    exportName: 'ContactInfo',
    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: {
            type: 'i18n',
            'en-US': 'placeholder',
            'zh-CN': '占位提示',
          },
        },
        name: 'placeholder',
        setter: 'PisellI18nSetter',
      },
      {
        title: '是否开启删除',
        name: 'isShowDelete',
        setter: 'BoolSetter',
        defaultValue: false,
      },
      {
        title: '展示方向',
        name: 'direction',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '水平',
                value: 'horizontal',
              },
              {
                label: '垂直',
                value: 'vertical',
              },
            ],
          },
          initialValue: 'horizontal',
        },
      },
      {
        title: '卡片样式',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: true,
        },
        items: cardStyleProps,
      },
      {
        title: '头像',
        type: 'group',
        display: 'block',
        items: [
          {
            title: '显示头像',
            name: 'isShowAvatar',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            type: 'group',
            condition: (target: any) =>
              target.getProps().getPropValue('isShowAvatar'),
            items: [...pisellAvatarProps],
          },
        ],
      },
      {
        title: '姓名',
        type: 'group',
        display: 'block',
        items: [
          {
            title: '姓名默认文案',
            name: 'defaultName',
            setter: 'StringSetter',
          },
          ...nameStyleProps,
        ],
      },
      {
        title: '文本样式',
        type: 'group',
        display: 'block',
        items: [...textStyleProps],
      },
      {
        title: '操作按钮',
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'button.addButtonIcon',
            title: {
              label: '添加按钮的图标',
              tip: 'icon | 设置添加的自定义图标',
            },
            setter: AntdIconSetter,
          },
          {
            name: 'button.editButtonIcon',
            title: {
              label: '修改按钮的图标',
              tip: 'icon | 设置修改的自定义图标',
            },
            setter: AntdIconSetter,
          },
        ],
      },
      {
        type: 'group',
        display: 'block',
        title: '字段展示',
        items: [
          {
            title: '显示电话号',
            name: 'isShowPhone',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            title: '显示邮箱',
            name: 'isShowEmail',
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ],
      },
    ],
    supports: {
      events: [
        {
          name: 'onSave',
          description: '保存联系信息点击事件',
        },
        {
          name: 'onDelete',
          description: '删除联系信息点击事件',
        },
        {
          name: 'onCancel',
          description: '取消点击事件',
        },
      ],
      style: true,
    },
  },
};

const snippets = [
  {
    title: '联系信息',
    screenshot: '',
    schema: {
      componentName: 'ContactInfo',
      props: {
        direction: 'horizontal',
      },
    },
  },
];

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