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

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) {
      useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
    } else {

    }
  }, [socket]);

  return (
    <div className="dashboard-main">
      <SidePannel setActiveTab={setActiveTab} activeTab={activeTab} />
      {activeTab == "Home" && <DashboardHome />}
      {activeTab == "Projects" && <DashboardProjects />}
      {activeTab == "Trash" && <DashboardTrash />}
      {activeTab == "Tutorials" && <DashboardTutorial />}
    </div>
  );
};

export default Dashboard;