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

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

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

  return (
    <div className="dashboard-main">
      <SidePannel setActiveTab={setActiveTab} activeTab={activeTab} />
      <DashboardMain
        activeFolder={
          activeTab.toLowerCase() as "home" | "projects" | "shared" | "trash"
        }
      />
      {activeTab === "Tutorials" && <DashboardTutorial />}
    </div>
  );
};

export default Dashboard;
