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

const TextMeta: IPublicTypeComponentMetadata = {
  componentName: 'Text',
  title: '文本',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '基础组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'Text',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label: '动态文本',
              tip: '设置为动态后,文本内容通过筛选动态类型生成',
            },
            name: 'dynamic',
            setter: 'BoolSetter',
          },
          {
            title: {
              label: '动态内容',
              tip: '当前动态数据源名称',
            },
            name: 'dynamicType',
            condition: (target) => {
              return target.parent.getPropValue('dynamic');
            },
            setter: {
              componentName: 'SelectSetter',
              isRequired: false,
              initialValue: 'appName',
              props: {
                options: [{ label: '应用名称', value: 'appName' }],
              },
            },
          },
          {
            title: {
              label: '内容',
              tip: '要展示的文本内容',
            },
            name: 'text',
            condition: (target) => {
              return !target.parent.getPropValue('dynamic');
            },
            setter: {
              componentName: 'StringSetter',
              isRequired: false,
              initialValue: '文本',
            },
          },
          {
            title: {
              label: '是否是行内元素',
              tip: '行内元素可以与其他元素保持一行',
            },
            name: 'inline',
            setter: 'BoolSetter',
          },
          {
            title: '样式',
            type: 'group',
            display: 'accordion',
            items: [
              {
                title: '样式',
                name: 'styles',
                display: 'plain',
                setter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          title: {
                            label: '字体大小',
                            tip: '字体尺寸,未填写时,默认使用14',
                          },
                          name: 'fontSize',
                          setter: {
                            componentName: 'NumberSetter',
                            isRequired: false,
                            initialValue: 14,
                          },
                        },
                        {
                          title: {
                            label: '字重',
                            tip: '设置字体粗细,默认使用中等字重',
                          },
                          name: 'fontWeight',
                          setter: {
                            componentName: 'SelectSetter',
                            isRequired: false,
                            initialValue: '400',
                            props: {
                              options: [
                                { label: '细', value: '200' },
                                { label: '中等', value: '400' },
                                { label: '粗', value: '600' },
                              ],
                            },
                          },
                        },
                        {
                          title: {
                            label: '字体颜色',
                            tip: '设置文本字体颜色,默认使用黑色',
                          },
                          name: 'color',
                          setter: {
                            componentName: 'ColorSetter',
                            isRequired: false,
                            initialValue: '#000',
                          },
                        },
                        {
                          title: {
                            label: '背景颜色',
                            tip: '设置文本背景颜色,默认为透明色',
                          },
                          name: 'backgroundColor',
                          setter: {
                            componentName: 'ColorSetter',
                            isRequired: false,
                            initialValue: 'transparent',
                          },
                        },
                        {
                          title: {
                            label: '宽高设置',
                            tip: '是否自定义设置文本宽高',
                          },
                          name: 'widthHeightVisible',
                          setter: {
                            componentName: 'BoolSetter',
                            isRequired: false,
                            initialValue: false,
                          },
                        },
                        {
                          title: {
                            label: '宽度',
                            tip: '设置文本宽度',
                          },
                          condition: (target) => {
                            return target.parent.getPropValue('widthHeightVisible');
                          },
                          name: 'width',
                          setter: {
                            componentName: 'NumberSetter',
                            isRequired: false,
                            initialValue: null,
                          },
                        },
                        {
                          title: {
                            label: '高度',
                            tip: '设置文本高度',
                          },
                          condition: (target) => {
                            return target.parent.getPropValue('widthHeightVisible');
                          },
                          name: 'height',
                          setter: {
                            componentName: 'NumberSetter',
                            isRequired: false,
                            initialValue: 18,
                          },
                        },
                        {
                          title: {
                            label: '行高',
                            tip: '设置文本文字行高,文本过长换行时可能会使用该功能',
                          },
                          condition: (target) => {
                            return target.parent.getPropValue('widthHeightVisible');
                          },
                          name: 'lineHeight',
                          setter: {
                            componentName: 'NumberSetter',
                            isRequired: false,
                            initialValue: 18,
                          },
                        },
                        {
                          title: {
                            label: '对齐方式',
                            tip: '设置文字在文本中的对齐方式',
                          },
                          name: 'textAlign',
                          setter: {
                            componentName: 'SelectSetter',
                            isRequired: false,
                            initialValue: 'left',
                            props: {
                              options: [
                                { label: '左对齐', value: 'left' },
                                { label: '中间对齐', value: 'center' },
                                { label: '右对齐', value: 'right' },
                              ],
                            },
                          },
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    ],
    supports: {
      style: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '文本',
    screenshot: '',
    schema: {
      componentName: 'Text',
      props: {
        dynamic: false,
        dynamicType: 'appName',
        data: '文本',
        inline: false,
      },
    },
  },
];

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