import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';

const PisellSiderMeta: ComponentMetadata = {
  componentName: 'PisellSider',
  title: '侧边栏',
  docUrl: '',
  screenshot: require('./__screenshots__/sider.png'),
  devMode: 'proCode',
  category: "布局",
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellSider',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'className',
          'zh-CN': '类名',
        },
      },
      name: 'className',
      setter: 'StringSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'style',
          'zh-CN': '样式',
        },
      },
      name: 'style',
      setter: 'StyleSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'breakpoint',
          'zh-CN': '触发响应式布局的断点',
        },
      },
      name: 'breakpoint',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            { label: 'xs', value: 'xs' },
            { label: 'sm', value: 'sm' },
            { label: 'md', value: 'md' },
            { label: 'lg', value: 'lg' },
            { label: 'xl', value: 'xl' },
            { label: 'xxl', value: 'xxl' },
          ],
        },
      },
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'collapsed',
          'zh-CN': '当前收起状态',
        },
      },
      name: 'collapsed',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'collapsible',
          'zh-CN': '是否可收起',
        },
      },
      name: 'collapsible',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'width',
          'zh-CN': '宽度',
        },
      },
      name: 'width',
      setter: 'NumberSetter',
      defaultValue: 200,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'collapsedWidth',
          'zh-CN': '收起宽度',
        },
      },
      name: 'collapsedWidth',
      setter: 'NumberSetter',
      defaultValue: 80,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'trigger',
          'zh-CN': '触发器',
        },
      },
      name: 'trigger',
      setter: ['SlotSetter'],
    },
    {
      name: "reverseArrow",
      title: {
        label: {
          type: 'i18n',
          'en-US': 'reverseArrow',
          'zh-CN': '反转箭头',
        },
      },
      setter: 'BoolSetter',
      defaultValue: false,
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
    },
  },
};

const snippets: Snippet[] = [
  {
    title: '侧边栏',
    screenshot: require('./__screenshots__/sider.png'),
    schema: {
      componentName: 'PisellSider',
      props: {
        style: {
          backgroundColor: '#3ba0e9',
          color: '#fff',
          lineHeight: '120px',
          textAlign: 'center',
        },
        width: 200,
        collapsedWidth: 80,
      },
      children: [{
        componentName: 'PisellText',
        props: {
          style: {
            color: '#fff',
          },
        },
        children: 'Sider',
      },],
    },
  },
];

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