import React, { useEffect, useState } from "react";
import ToggleHeader from "../../ui/inputs/ToggleHeader";
import Header from "./Header";
import { useToggleStore } from "../../../store/ui/useUIToggleStore";
import Assets from "./assetList/Assets";
import useModuleStore from "../../../store/ui/useModuleStore";
import Widgets from "./visualization/widgets/Widgets";
import Templates from "../../../modules/visualization/template/Templates";
import Search from "../../ui/inputs/Search";
import { useIsComparing } from "../../../store/builder/store";
import { AssetOutline } from "../../ui/list/OutlineList/AssetOutline";

const SideBarLeft: React.FC = () => {
    const [activeOption, setActiveOption] = useState("Widgets");

    const { toggleUILeft } = useToggleStore();
    const { activeModule } = useModuleStore();

    const { isComparing } = useIsComparing();

    // Reset activeOption whenever activeModule changes
    useEffect(() => {
        setActiveOption("Outline");
        if (activeModule === "visualization") setActiveOption("Widgets");
    }, [activeModule]);

    const handleToggleClick = (option: string) => {
        setActiveOption(option); // Update the active option
    };

    const handleSearchChange = (value: string) => {
        // Log the search value for now
        // console.log(value);
    };

    return (
        <div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`}>
            <Header />
            {toggleUILeft && (
                <div className={`sidebar-left-container `}>
                    {(() => {
                        if (activeModule === "visualization") {
                            return (
                                <>
                                    <ToggleHeader options={["Widgets", "Templates"]} activeOption={activeOption} handleClick={handleToggleClick} />
                                    <Search onChange={handleSearchChange} />
                                    <div className="sidebar-left-content-container">{activeOption === "Widgets" ? <Widgets /> : <Templates />}</div>
                                </>
                            );
                        } else if (activeModule === "market") {
                            return <></>;
                        } else if (activeModule === "builder") {
                            return (
                                <>
                                    <ToggleHeader options={["Outline", "Assets"]} activeOption={activeOption} handleClick={handleToggleClick} />
                                    <div className="sidebar-left-content-container">{activeOption === "Outline" ? <AssetOutline /> : <Assets />}</div>
                                </>
                            );
                        } else {
                            return (
                                <>
                                    {!isComparing && (
                                        <>
                                            <ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
                                            <div className="sidebar-left-content-container">{activeOption === "Outline" ? <AssetOutline /> : <Assets />}</div>
                                        </>
                                    )}
                                </>
                            );
                        }
                    })()}
                </div>
            )}
        </div>
    );
};

export default SideBarLeft;

// sidebar-left-container open close sidebar-left-container smoothly