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

const PisellLayoutMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellLayout',
  title: 'Layout布局容器',
  docUrl: '',
  screenshot: require('./__screenshots__/layout.png'),
  category: "布局",
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellLayout',
    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': 'hasSider',
          'zh-CN': '是否有侧边栏',
        },
      },
      name: 'hasSider',
      setter: 'BoolSetter',
      defaultValue: false,
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: 'Layout布局容器',
    screenshot: require('./__screenshots__/layout.png'),
    schema: {
      componentName: 'PisellLayout',
      props: {
        style: {
          height: '100%',
        }
      },
      children: [
        {
          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',
          },],
        },
        {
          componentName: 'PisellLayout',
          props: {
            hasSider: true
          },
          children: [
            {
              componentName: 'PisellSider',
              props: {
                style: {
                  backgroundColor: '#3ba0e9',
                  color: '#fff',
                  lineHeight: '120px',
                  textAlign: 'center',
                },
                width: 200,
              },
              children: [{
                componentName: 'PisellText',
                props: {
                  style: {
                    color: '#fff',
                  },
                },
                children: 'Sider',
              },],
            },
            {
              componentName: 'PisellContent',
              props: {
                style: {
                  backgroundColor: '#7dbcea',
                  color: '#fff',
                  minHeight: 120,
                  lineHeight: '120px',
                  textAlign: 'center',
                },
                scroll: true,
              },
              // children: [{
              //   componentName: 'PisellText',
              //   props: {
              //     style: {
              //       color: '#fff',
              //     },
              //   },
              //   children: 'Content',
              // },],
            },
          ],
        },
        {
          componentName: 'PisellFooter',
          props: {
            style: {
              backgroundColor: '#1890ff',
              color: '#fff',
              textAlign: 'center',
            },
            height: 80
          },
          children: [{
            componentName: 'PisellText',
            props: {
              style: {
                color: '#fff',
              },
            },
            children: 'Footer',

          },],
        },
      ],
    },
  },
];

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