import {React, useState} from 'react'
import { useNavigate } from 'react-router-dom';
import {SbTitle, SbSub, SbLink} from './Sb.style'
import { FcFolder, FcOpenedFolder, FcFile } from 'react-icons/fc'
import { AiOutlinePlusSquare, AiOutlineMinusSquare } from 'react-icons/ai'

const SbItem = ({ item }) => {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate();
    function toggleCollapse() {
        setCollapsed(prevValue => !prevValue);
    }

    if(item.childrens.length > 0){
        const icon1 = collapsed?<AiOutlinePlusSquare />:<AiOutlineMinusSquare />;
        const icon2 = collapsed?<FcOpenedFolder />:<FcFolder />;
        return (
            <div>
                <SbTitle depth={item.doc_level} onClick={toggleCollapse}>{icon1}{icon2}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbTitle>
                <SbSub isOpen={collapsed}>
                    {item.childrens.map((child) => (
                        <SbItem item={child} />
                    ))}
                </SbSub>
            </div>
        )
    }else{
        const icon = <FcFile />;
        return (
            <SbTitle depth={item.doc_level}>
                {/*<a onClick={()=>{
                    navigate('/standardCode/viewer', {
                        state:{
                            docCode: item.doc_code
                        }
                    })
                }}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</a>*/}
                <SbLink to={"/standardCode/viewer/"+item.doc_code}>{icon}&nbsp;{(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbLink>
            </SbTitle>
        )
    }

}

export default SbItem