import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import sidebar from "@/states/Manage/pages/pages.jsx";
import {useNavigate, useParams} from "react-router-dom";
import {getPage} from "@/states/Manage/Manage.jsx";

export const Sidebar = ({open, setOpen}) => {
    const navigate = useNavigate();
    const params = useParams();

    const update = (path) => {
        navigate(path.replace(":id", params.id));
        setOpen(false);
    }

    return (
        <>
            {open && <div className="sidebar-overlay" onClick={() => setOpen(false)}/>}
            <aside className={open ? "active" : ""}>
                <div className="header" onClick={() => update("/")}>
                    <img src="/assets/images/logo192.png" alt="sheepstar"/>
                    <h1>Sheepstar</h1>
                </div>

                {sidebar.map((page) => {
                    const current = getPage(window.location.pathname);

                    if (page.route) return;

                    return (
                        <div className={"sidebar-item" + (current.route === page.path || current.path === page.path ? " item-active" : "")}
                             key={page.name} onClick={() => update(page.path)}>
                            <FontAwesomeIcon icon={page.icon}/>
                            <h1>{page.name}</h1>
                        </div>
                    )
                })}
            </aside>
        </>
    )
}