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

const DCColMeta: IPublicTypeComponentMetadata = {
  componentName: 'DCCol',
  title: 'DCCol',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'dc-lowcode-material',
    version: '0.1.0',
    exportName: 'DCCol',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'type',
            'zh-CN': '宽度类型',
          },
        },
        name: 'type',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            dataSource: [
              {
                label: '栅格数',
                value: 'number',
              },
              {
                label: 'flex',
                value: 'flex',
              },
            ],
            options: [
              {
                label: '栅格数',
                value: 'number',
              },
              {
                label: 'flex',
                value: 'flex',
              },
            ],
          },
          isRequired: true,
          initialValue: 'flex',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': '宽度',
          },
        },
        name: 'width',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 1,
          defaultValue: 1,
        },
        condition: (target) => {
          return target.getProps().getPropValue('type') === 'number';
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'flexType',
            'zh-CN': 'flex宽度类型',
          },
        },
        name: 'flexType',
        condition: (target) => {
          return target.getProps().getPropValue('type') === 'flex';
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            dataSource: [
              {
                label: '像素数',
                value: 'px',
              },
              {
                label: 'flex',
                value: 'flex',
              },
            ],
            options: [
              {
                label: '像素数',
                value: 'px',
              },
              {
                label: 'flex',
                value: 'flex',
              },
            ],
          },
          isRequired: true,
          initialValue: 'flex',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': '宽度(像素值)',
          },
          tip: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': '固定像素值',
          },
        },
        name: 'width',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 200,
          defaultValue: 200,
          props: {
            min: 0,
            units: 'px',
          },
        },
        condition: (target) => {
          return (
            target.getProps().getPropValue('type') === 'flex' &&
            target.getProps().getPropValue('flexType') === 'px'
          );
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': '宽度(flex值)',
          },
          tip: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': 'flex值',
          },
        },
        name: 'width',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 1,
          defaultValue: 1,
          props: {
            min: 0,
          },
        },
        condition: (target) => {
          return (
            target.getProps().getPropValue('type') === 'flex' &&
            target.getProps().getPropValue('flexType') === 'flex'
          );
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
  group: '点持组件',
  category: '布局',
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '列组件',
    screenshot: '',
    schema: {
      title: '栅格-列',
      componentName: 'DCCol',
      props: {},
    },
  },
];

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