import React, {useState} from 'react';
import {Row, Col, Card} from 'antd';
import './index.less'

export interface GPanelProps {
  lColSpanC: number
  lTitle: string
  lToolButton?: any
  lContent: any
  rColSpanC: number
  rTitle: string
  rToolButton: any
  rContent: any
}

const GPanel: React.FC<GPanelProps> = (props) => {
  let {lColSpanC, lTitle, lToolButton, lContent, rColSpanC, rTitle, rToolButton, rContent} = props
  const [isShowLeft, setIsShowLeft] = useState<boolean>(true)
  return (
      <div className="gpanel" style={{height: '100%'}}>
        <Row style={{height: '100%'}}>
          {isShowLeft &&
          <Col span={lColSpanC}>
              <Card extra={lToolButton}
                    size="small"
                    title={lTitle}
                    style={{height: '100%'}}
                    bodyStyle={{overflow: 'auto'}}>
                {lContent}
              </Card>
          </Col>}
          <Col span={isShowLeft ? rColSpanC : 24}>
            <div className="navbar-container"
                 style={{position: 'absolute', top: 0}}
                 onClick={() => {
                   setIsShowLeft(!isShowLeft)
                 }}>
              <div className="navbar-collapse">
                <div className="collapse-bg"/>
                <div className="collapse">{isShowLeft ? '<' : '>'}</div>
              </div>
            </div>

            <Card extra={rToolButton}
                  size="small"
                  title={rTitle}
                  style={{height: '100%'}}
                  bodyStyle={{overflow: 'auto'}}>
              {rContent}
            </Card>
          </Col>
        </Row>
      </div>
  );
};

export default GPanel;