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

const LinkMeta: IPublicTypeComponentMetadata = {
  componentName: 'Link',
  title: '链接',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '基础组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'Link',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label: '文字',
              tip: '超链接展示文本内容',
            },
            name: 'text',
            condition: (target) => {
              return target.parent.getPropValue('visible');
            },
            setter: {
              componentName: 'StringSetter',
              isRequired: false,
              initialValue: '链接文本',
            },
          },
          {
            title: {
              label: '4A跳转',
              tip: '是否支持4A跳转',
            },
            name: 'is4A',
            setter: 'BoolSetter',
          },
          {
            title: {
              label: '地址',
              tip: '超链接跳转地址',
            },
            condition: (target) => {
              return !target.parent.getPropValue('is4A');
            },
            name: 'url',
            setter: 'StringSetter',
          },
          {
            title: {
              label: '4A标识',
              tip: '4A系统的clientid',
            },
            condition: (target) => {
              return target.parent.getPropValue('is4A');
            },
            name: 'clientid',
            setter: 'StringSetter',
          },
          {
            name: 'target',
            title: {
              label: '跳转方式',
              tip: '选择在当前页面跳转还是打开新页面',
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    value: '_self',
                    title: '当前页面',
                  },
                  {
                    value: '_blank',
                    title: '新开页面',
                  },
                ],
              },
              initialValue: '_blank',
            },
            condition: (target) => {
              const configType = target.parent.getPropValue('!configType');
              return !configType || configType === 'link';
            },
          },
        ],
      },
      {
        title: '样式配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label: '尺寸',
              tip: '跳转链接尺寸',
            },
            name: 'size',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    value: 'small',
                    title: 'S',
                  },
                  {
                    value: 'medium',
                    title: 'M',
                  },
                  {
                    value: 'large',
                    title: 'L',
                  },
                ],
              },
              initialValue: 'medium',
            },
          },
          {
            title:{
              label:'位置',
              tip:'设置链接按钮的位置'
            },
            name:'justify',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    value: 'flex-start',
                    title: '左边',
                  },
                  {
                    value: 'center',
                    title: '居中',
                  },
                  {
                    value: 'flex-end',
                    title: '右',
                  },
                ],
              },
              initialValue: 'flex-start',
            },
          }
        ],
      },
    ],
    supports: {
      style: false,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '链接',
    screenshot: '',
    schema: {
      componentName: 'Link',
      props: {
        data: '',
        is4A: false,
        justify:'flex-start',
      },
    },
  },
];

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