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 "../components/Dashboard/functions/getUserData";
import SidePannel from "../components/Dashboard/SidePannel";
import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
import { useProductStore } from "../store/simulation/useProductStore";
import { useEventsStore } from "../store/simulation/useEventsStore";

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

  useEffect(() => {
    clearEvents();
    clearProducts();
  }, [])

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (token) {
      useSocketStore.getState().initializeSocket(email, organization, token);
    } 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;