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

const PisellHeaderMeta: ComponentMetadata = {
  componentName: 'PisellHeader',
  title: '头部',
  docUrl: '',
  screenshot: require('./__screenshots__/header.png'),
  devMode: 'proCode',
  category: "布局",
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellHeader',
    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': 'height',
          'zh-CN': '高度',
        },
      },
      name: 'height',
      setter: 'NumberSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Fixed header',
          'zh-CN': '固定头部',
        },
      },
      name: 'fixed',
      setter: 'BoolSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'style',
          'zh-CN': '样式',
        },
      },
      name: 'style',
      setter: 'StyleSetter',
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
    },
  },
};

const snippets: Snippet[] = [
  {
    title: '头部',
    screenshot: require('./__screenshots__/header.png'),
    schema: {
      componentName: 'PisellHeader',
      props: {
        style: {
          backgroundColor: '#1890ff',
          color: '#fff',
          lineHeight: '64px',
          textAlign: 'center',
        },
        height: 64,
        fixed: true,
      },
      children: [{
        componentName: 'PisellText',
        props: {
          style: {
            color: '#fff',
          },
        },
        children: 'Header',
      },],
    },
  },
];

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