import React,{useState} from "react"
import styles from "./index.module.less"
import {CaretLeftOutlined ,CaretRightOutlined } from "@ant-design/icons"
import { Resizable } from 'react-resizable';

interface panelprops{
    leftPanel:any;
    rightPanel:any;
    middlecolor?:string;
}

const LeftTreePanel:React.FC<panelprops>=(props)=>{

    const {leftPanel,rightPanel,middlecolor='#fff'} = props
    const [open,setOpen] = useState('')

    const pointclick = ()=>{
        if(open==='hidetree'){
            setOpen('opentree')
        }else{
            setOpen('hidetree')
        }
        
    }

    const getStyle=()=>{
        if(open==='hidetree'){
            return {width:0,display:'none'}
        }else{
            return {minWidth:230}
        }
    }

    return(
        <div className={styles.main} >
            <div className={`${ styles.left}`} style={getStyle()}>
                <Resizable 
                    width={230} 
                    height={Infinity}
                    axis='x'
                    minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}
                >
                    {leftPanel||null}
                </Resizable>
                
            </div>
            <div className={styles.middle} style={{background:middlecolor}}>
                <div className={styles.point} onClick={pointclick}>
                    {
                        open==='hidetree'?(
                            <CaretRightOutlined />
                        ):(
                            <CaretLeftOutlined />
                        )
                    }
                </div>
            </div>
            <div className={`${styles.right}`}>
                {rightPanel||null}
                {/* {rightPanel||null} */}
            </div>
        </div>
    )
}

export default LeftTreePanel