import './sidebar-item.less';
import { CaretRightOutlined } from '@ant-design/icons';
import { Fragment, useState } from "react";
import classnames from "classnames";
import CustomLink from '../custom-link/custom-link';
import { IsidebarItem } from '.';

interface Iprops {
    route: IsidebarItem
}
export default function SidebarItem(props: Iprops) {

    const route = props.route;
    let [expanded, setExpanded] = useState(!!route.expanded);
    let [active, setActive] = useState(false);

    const handleExpand = (e) => {
        setExpanded(!expanded);
        e.stopPropagation();
    }

    const ItemContent = (
        <Fragment>
            <div>
                {route.icon}
            </div>
            <div className="item-name">
                <span>{route.name}</span>
            </div>
        </Fragment>
    )

    return (
        <div className="sidebar-item-container">
            <div className={classnames({
                'item': true,
                'active': active
            })}>
                <div className="item-pre" onClick={handleExpand}>
                    {route.children != null && (
                        <CaretRightOutlined className={classnames({
                            "expanded": expanded,
                            "icon": true,
                        })} />
                    )}
                </div>
                {route.url && (
                    <CustomLink to={route.url} active={(active) => setActive(!!active)} className="item-content">
                        {ItemContent}
                    </CustomLink>
                )}
                {!route.url && (
                    <div className="item-content" onClick={handleExpand}>
                        {ItemContent}
                    </div>
                )}
            </div>
            <div className={classnames({
                "sub-item-group": true,
                "fold": !expanded
            })} style={{ "height": `${route.children?.length * 28}px` }}>
                {route.children?.map(subItem => (
                    <CustomLink key={subItem.url} to={subItem.url} className='sub-item'>
                        {subItem.name}
                    </CustomLink>
                ))}
            </div>
        </div>
    )
}