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";
import { useSaveVersion } from "../../../store/builder/store";

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

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

  const { isVersionSaved } = useSaveVersion();

  // 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);
  };

  console.log('isVersionSaved: ', isVersionSaved);
  console.log('toggleUILeft: ', toggleUILeft);

  return (
    <div
      className={`sidebar-left-wrapper ${toggleUILeft && (!isVersionSaved || 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" ? <Outline /> : <Assets />}
                  </div>
                </>
              );
            } else {
              return (
                <>
                  {!isVersionSaved && (
                    <>
                      <ToggleHeader
                        options={["Outline"]}
                        activeOption={activeOption}
                        handleClick={handleToggleClick}
                      />
                      <div className="sidebar-left-content-container">
                        {activeOption === "Outline" ? <Outline /> : <Assets />}
                      </div>
                    </>
                  )}
                </>
              );
            }
          })()}
        </div>
      )}
    </div>
  );
};

export default SideBarLeft;

// sidebar-left-container opemn close sidebar-left-container smoothly