import { useMemo, useState } from 'react';
import classNames from 'classnames';
import { ResizableBox } from 'react-resizable';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';

import DefineTree from './Component/DefineTree';
import DefineTable from './Component/DefineTable';

import './index.less';

const DataMasterDefine = (props) => {

  const [collapse, setCollapse] = useState(false);
  const [nodeId, setNodeId] = useState('');

  const classes = useMemo(() => {
    return classNames('data-master', {
      'data-master-collapse': collapse,
    }); 
  }, [collapse]);

  const onTreeClick = (value) => {
    setNodeId(value);
  }

  const onCollapseClick = () => {
    setCollapse(!collapse);
  }

  return (
    <div className={classes}>
      <ResizableBox 
        className='left-wrap' 
        width={230} 
        height={Infinity}
        axis='x'
        minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
      >
        <DefineTree onClick={onTreeClick} />
      </ResizableBox>
      <div className='left-collapse-wrap'>
        <div className='left-collapse' onClick={onCollapseClick}>
          { collapse ? <CaretRightOutlined /> : <CaretLeftOutlined /> }
        </div>
      </div>
      <div className='right-wrap'>
        <DefineTable nodeId={nodeId} />
      </div>
    </div>
  )
}

export default DataMasterDefine;