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

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

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

  // 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">
      <Header />
      {toggleUI && (
        <div className="sidebar-left-container">
          {activeModule === "visualization" ? (
            <>
              <ToggleHeader
                options={["Widgets", "Templates"]}
                activeOption={activeOption}
                handleClick={handleToggleClick}
              />
              <Search onChange={handleSearchChange} />
              <div className="sidebar-left-content-container">
                {activeOption === "Widgets" ? <Widgets /> : <Templates />}
              </div>
            </>
          ) : activeModule === "market" ? (
            <></>
          ) : activeModule === "builder" ? (
            <>
              <ToggleHeader
                options={["Outline", "Assets"]}
                activeOption={activeOption}
                handleClick={handleToggleClick}
              />
              <div className="sidebar-left-content-container">
                {activeOption === "Outline" ? <Outline /> : <Assets />}
              </div>
            </>
          ) : (
            <>
              <ToggleHeader
                options={["Outline"]}
                activeOption={activeOption}
                handleClick={handleToggleClick}
              />
              <div className="sidebar-left-content-container">
                {activeOption === "Outline" ? <Outline /> : <Assets />}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default SideBarLeft;