import React, { useContext, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setSelectedTab } from '../../store/navigationSlice';
import "./SideNavigation.css";
import TreeTab from "./SideTabs/TreeTab";
import TemplateTab from "./SideTabs/TemplateTab";
import { AuthContext } from "../../AuthProvider";

const SideNavigation = () => {
    const { roles } = useContext(AuthContext);
    const selectedTab = useSelector(state => state.navigation.selectedTab);
    const dispatch = useDispatch();

    const allTabs = [
        { id: "tree", label: "Tree", component: <TreeTab /> },
        { id: "templates", label: "Templates", component: <TemplateTab /> },
    ];

    const visibleTabs = roles.includes("admin")
        ? allTabs
        : allTabs.filter(tab => tab.id === "tree");

    useEffect(() => {
        if (!visibleTabs.find(tab => tab.id === selectedTab)) {
            dispatch(setSelectedTab(visibleTabs[0]?.id || ""));
        }
    }, [visibleTabs, selectedTab, dispatch]);


    const current = visibleTabs.find(t => t.id === selectedTab);

    return (
        <aside className="side-nav">
            <div className="tabs is-small">
                <ul>
                    {visibleTabs.map(tab => (
                        <li
                            key={tab.id}
                            className={tab.id === selectedTab ? "is-active" : ""}
                        >
                            <a onClick={() => dispatch(setSelectedTab(tab.id))}>
                                {tab.label}
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
            <div className="tab-content">
                {current?.component}
            </div>
        </aside>
    );
};

export default SideNavigation;