import React, { useState, useMemo } from 'react';
import { IconFont } from '@zenview/micro-components'
import { Row, Col } from 'antd'
import { computedGrid, simpleGrid } from '../utils/index'

function TwoColumnLayout({ className, leftContent, children, siderGrid }) {
  const [visible, setVisible] = useState(true);
  const contentGrid = useMemo(() => computedGrid(siderGrid), [siderGrid]);
  return (
    <Row className={`lm-c-two-colume-layout ${!visible ? 'lm-c-two-colume-layout-flex' : ''} ${className}`}>
      <Col {...siderGrid} className={`lm-c-two-colume-left-layout ${!visible ? 'hide-left-layout ' : ''}`}>
        <div className="lm-c-two-colume-left-content">{leftContent}</div>
        <span onClick={() => setVisible(!visible)} className="left-content-slider-btn">
          <IconFont type={visible ? 'icon-S_Arrow_SmallLeft' : 'icon-S_Arrow_SmallRight'} />
        </span>
      </Col>
      <Col className={`lm-c-two-colume-right-content ${!visible ? 'right-content-full-layer' : ''}`} {...contentGrid}>
     
        {children}
      </Col>
    </Row>
  );


}
TwoColumnLayout.defaultProps = {
  className: '',
  siderGrid: simpleGrid
};

export default React.memo(TwoColumnLayout);
