import React from 'react';
import AntdLayout from 'antd/es/layout';
import { SiderContext as AntdSiderContext } from 'antd/es/layout/Sider';

import { ConfigConsumer } from '../config-provider';
import Collapse from '../../icons/collapse.svg';
import IconBase from '../icons/IconBase';

import './index.less';

export const SiderContext = AntdSiderContext;

// layout
const Layout = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('layout', customizePrefixCls);
      return <AntdLayout prefixCls={prefixCls} {...restProps} />;
    }}
  </ConfigConsumer>
);

// sider
Layout.Sider = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
      return (
        <AntdLayout.Sider
          prefixCls={prefixCls}
          trigger={<IconBase icon={Collapse} />}
          collapsedWidth={64}
          {...restProps}
        />
      );
    }}
  </ConfigConsumer>
);

// content
Layout.Content = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('layout-content', customizePrefixCls);
      return <AntdLayout.Content prefixCls={prefixCls} {...restProps} />;
    }}
  </ConfigConsumer>
);

// header
Layout.Header = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('layout-header', customizePrefixCls);
      return <AntdLayout.Header prefixCls={prefixCls} {...restProps} />;
    }}
  </ConfigConsumer>
);

// footer
Layout.Footer = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('layout-footer', customizePrefixCls);
      return <AntdLayout.Footer prefixCls={prefixCls} {...restProps} />;
    }}
  </ConfigConsumer>
);

export default Layout;