import { snippets } from './snippets';

export const CardProps = [
  {
    name: 'title',
    title: '标题',
    setter: () => {
      if (window.AliLowCodeEngine && window.AliLowCodeEngine.setters.getSetter('TitleSetter')) {
        return {
          componentName: 'TitleSetter',
          defaultValue: '标题',
          props: {
            defaultChecked: true,
          },
        };
      }
      return {
        componentName: 'StringSetter',
        defaultValue: '标题',
      };
    },
    description: '标题',
  },
  {
    name: 'subTitle',
    title: '子标题',
    setter: () => {
      if (window.AliLowCodeEngine && window.AliLowCodeEngine.setters.getSetter('TitleSetter')) {
        return {
          componentName: 'TitleSetter',
          defaultValue: '子标题',
        };
      }
      return {
        componentName: 'StringSetter',
        defaultValue: '',
      };
    },
  },
  {
    name: 'tooltip',
    title: {
      label: '解释文案',
      tip: '标题栏用户自定义内容',
    },
    setter: () => {
      if (window.AliLowCodeEngine && window.AliLowCodeEngine.setters.getSetter('TitleSetter')) {
        return {
          componentName: 'TitleSetter',
          defaultValue: '解释文案',
        };
      }
      return {
        componentName: 'StringSetter',
        defaultValue: '',
      };
    },
  },
  {
    name: 'headerBordered',
    setter: 'BoolSetter',
    title: '头部分割线',
    defaultValue: true,
  },
  {
    name: 'ghost',
    setter: 'BoolSetter',
    title: { label: '幽灵模式', tip: '是否取消卡片内容区域的 padding 和 卡片的背景颜色。' },
    defaultValue: false,
  },
  {
    name: 'loading',
    setter: 'BoolSetter',
    title: '加载中',
    defaultValue: false,
  },
  {
    title: '主标题操作',
    type: 'group',
    display: 'accordion',
    items: [
      {
        name: 'collapsible',
        setter: 'BoolSetter',
        title: '可收起',
        defaultValue: false,
      },
      {
        name: 'extra',
        title: { label: '额外元素', tip: '卡片右上角的操作区域' },
        propType: { type: 'oneOfType', value: ['func', 'node'] },
        setter: [
          {
            componentName: 'SlotSetter',
            title: '工具栏操作插槽',
            initialValue: {
              type: 'JSSlot',
              value: [],
            },
          },
          'VariableSetter',
        ],
      },
    ],
  },
];

export const CardMeta = {
  componentName: 'ProCard',
  title: '高级卡片',
  docUrl: '',
  screenshot:
    'https://img.alicdn.com/imgextra/i4/O1CN01qjZnGj1OW8lpLCQqm_!!6000000001712-55-tps-56-56.svg',
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01qjZnGj1OW8lpLCQqm_!!6000000001712-55-tps-56-56.svg',
  devMode: 'proCode',
  group: '高级组件',
  category: '布局容器类',
  npm: {
    package: '@devlego/lowcode-materials-procomponents',
    version: 'latest',
    exportName: 'ProCard',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: CardProps,
  configure: {
    component: {
      isContainer: true,
    },
    props: CardProps,
    supports: {
      style: true,
      loop: false,
    },
  },
};

export default [
  {
    ...CardMeta,
    snippets,
  },
];
