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

interface panelprops{
    leftPanel:Function;
    rightPanel:Function;
    topPanel:any;
}

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

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

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


    return(
        <div className={styles.main} >
            <div className={`${ styles.left} ${open?(open==='opentree'?styles.showtrees:styles.hidetrees):''}`}>
                <div className={styles.paneltree}>
                    {leftPanel&&leftPanel()}
                </div>
                <div className={styles.bar} />
            </div>
            {/* <div className={styles.middle}>
                <div className={styles.point} onClick={pointclick}>
                    {
                        open==='hidetree'?(
                            <CaretRightOutlined />
                        ):(
                            <CaretLeftOutlined />
                        )
                    }
                </div>
            </div> */}
            <div className={`${styles.right} ${open?(open==='opentree'?styles.hidetables:styles.showtables):''}`}>
                <div className={styles.actionbar}>
                    <div className={styles.point} onClick={pointclick}>
                        {
                            open==='hidetree'?(
                                <CaretRightOutlined />
                            ):(
                                <CaretLeftOutlined />
                            )
                        }
                    </div>
                </div>
                <div className={styles.catalog}>
                    {topPanel}
                </div>
                <div className={styles.middle}>

                </div>
                <div className={styles.metamain}>
                    {rightPanel&&rightPanel(open,pointclick)}
                </div>
            </div>
        </div>
    )
}

export default LeftTreePanel