import React from "react";
import { DocumentationIcon, HelpIcon, HomeIcon, LogoutIcon, NotificationIcon, ProjectsIcon, TrashIcon, TutorialsIcon } from "../icons/DashboardIcon";
import { useNavigate } from "react-router-dom";
import darkThemeImage from "../../assets/image/darkThemeProject.png";
import lightThemeImage from "../../assets/image/lightThemeProject.png";
import { SettingsIcon } from "../icons/ExportCommonIcons";
import { getUserData } from "../../functions/getUserData";
import { useSocketStore } from "../../store/socket/useSocketStore";

// import { createProject } from "../../services/dashboard/createProject";

interface SidePannelProps {
    setActiveTab: React.Dispatch<React.SetStateAction<string>>;
    activeTab: string;
}

const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
    const { userName, userId, organization } = getUserData();
    const navigate = useNavigate();
    const { projectSocket, initializeProjectSocket } = useSocketStore();
    const savedTheme = localStorage.getItem("theme") ?? "light";

    function generateProjectId() {
        const randomBytes = new Uint8Array(12);
        crypto.getRandomValues(randomBytes);
        return Array.from(randomBytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
    }

    const handleCreateNewProject = async () => {
        const token = localStorage.getItem("token");
        const refreshToken = localStorage.getItem("refreshToken");
        if (!token || !refreshToken) {
            console.error("token expired");
            return;
        }

        const projectId = generateProjectId();
        initializeProjectSocket(token, refreshToken);

        if (projectSocket?.connected) {
            // SOCKET
            const addProject = {
                userId,
                thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
                organization: organization,
                projectUuid: projectId,
            };

            projectSocket.emit("v1:project:add", addProject);
        } else {
            // API
            // const project = await createProject(
            //   projectId,
            //   userId,
            //   savedTheme === "dark" ? darkThemeImage : lightThemeImage,
            //   organization
            // );
        }
    };

    return (
        <div className="side-pannel-container">
            <div className="side-pannel-header">
                <div className="user-container">
                    <div className="user-profile">{userName?.charAt(0).toUpperCase()}</div>
                    <div className="user-name">{userName ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() : "Anonymous"}</div>
                </div>
                <div className="notifications-container">
                    <NotificationIcon />
                </div>
            </div>
            <div className="new-project-button" onClick={handleCreateNewProject}>
                + New project
            </div>
            <div className="side-bar-content-container">
                <div className="side-bar-options-container">
                    <button className={activeTab === "Home" ? "option-list active" : "option-list"} onClick={() => setActiveTab("Home")}>
                        <HomeIcon isActive={activeTab === "Home"} />
                        Home
                    </button>
                    <button className={activeTab === "Projects" ? "option-list active" : "option-list"} title="Projects" onClick={() => setActiveTab("Projects")}>
                        <ProjectsIcon isActive={activeTab === "Projects"} />
                        Projects
                    </button>
                    <button className={activeTab === "Trash" ? "option-list active" : "option-list"} title="Trash" onClick={() => setActiveTab("Trash")}>
                        <TrashIcon isActive={activeTab === "Trash"} />
                        Trash
                    </button>
                    <button
                        className={activeTab === "Use Cases" ? "option-list active" : "option-list"}
                        title="use case"
                        // disabled
                        onClick={() => {
                            setActiveTab("Use Cases");
                            console.warn("Use Cases comming soon");
                        }}
                    >
                        <TutorialsIcon isActive={activeTab === "Use Cases"} />
                        Use Cases
                    </button>
                    <button
                        className={activeTab === "Tutorials" ? "option-list active" : "option-list"}
                        title="coming soon"
                        disabled
                        onClick={() => {
                            setActiveTab("Tutorials");
                            console.warn("Tutorials comming soon");
                        }}
                    >
                        <TutorialsIcon isActive={activeTab === "Tutorials"} />
                        Tutorials
                    </button>
                    <button
                        className={activeTab === "Documentation" ? "option-list active" : "option-list"}
                        title="coming soon"
                        disabled // remove when added
                        onClick={() => {
                            setActiveTab("Documentation");
                            console.warn("Documentation comming soon");
                        }}
                    >
                        <DocumentationIcon isActive={activeTab === "Documentation"} />
                        Documentation
                    </button>
                </div>
                <div className="side-bar-options-container">
                    <button className="option-list" title="coming soon" disabled>
                        <SettingsIcon />
                        Settings
                    </button>
                    <button
                        className="option-list"
                        style={{ cursor: "pointer" }}
                        onClick={() => {
                            const theme = localStorage.getItem("theme") ?? "light";
                            localStorage.clear();
                            localStorage.setItem("theme", theme);
                            navigate("/");
                        }}
                    >
                        <LogoutIcon />
                        Log out
                    </button>
                    <button className="option-list" title="coming soon" disabled>
                        <HelpIcon />
                        Help & Feedback
                    </button>
                </div>
            </div>
        </div>
    );
};

export default SidePannel;
