import React, { useEffect, useState } from "react";
import { useSocketStore } from "../store/socket/useSocketStore";
import { getUserData } from "../functions/getUserData";
import SidePannel from "../components/Dashboard/SidePannel";
import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
import DashboardMain from "../components/Dashboard/DashboardMain";
import DashboardUseCases from "../components/Dashboard/DasboardUseCases";

export const ALPHA_ORG = "hexrfactory";

const Dashboard: React.FC = () => {
    const [activeTab, setActiveTab] = useState<string>("Home");
    const { organization, email } = getUserData();

    useEffect(() => {
        const token = localStorage.getItem("token");
        const refreshToken = localStorage.getItem("refreshToken");
        if (token && refreshToken) {
            useSocketStore.getState().initializeProjectSocket(token, refreshToken);
        }
    }, [email, organization]);

    return (
        <div className="dashboard-main">
            <SidePannel setActiveTab={setActiveTab} activeTab={activeTab} />
            {["Home", "Projects", "Shared", "Trash"].includes(activeTab) && <DashboardMain activeFolder={activeTab.toLowerCase() as Folder} />}
            {activeTab === "Tutorials" && <DashboardTutorial />}
            {activeTab === "Use Cases" && <DashboardUseCases />}
        </div>
    );
};

export default Dashboard;
