import React, { useState, useEffect, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; // Added import for Framer Motion
import "./styles/themes.css";
import ColorPicker from "./ColorPicker";
import ToggleSwitch from "./ToggleSwitch";
import {
  modalVariantsForThemes,
  childVariants,
} from "../utils/animationVariants";
import ColorProperties from "./ColorProperties";
import DefaultThemes from "./DefaultThemes.jsx";
import { ThemeProvider } from "./ThemeContext";

const Themes = () => {
  let storedDefaultThemes = DefaultThemes.get();
  let getStoredCustomThemes = localStorage.getItem("storedCustomThemes");
  let storedCustomThemes;
  if (getStoredCustomThemes) {
    storedCustomThemes = JSON.parse(getStoredCustomThemes);
  }

  const [activeThemeInCustomThemes, setActiveThemeInCustomThemes] = useState(
    () => {
      const storedActiveThemeInCustomThemes = localStorage.getItem(
        "activeThemeInCustomThemes"
      );
      return storedActiveThemeInCustomThemes !== null
        ? parseInt(storedActiveThemeInCustomThemes)
        : 0;
    }
  );
  const [toggleState, setToggleState] = useState(false);
  const [theme, setTheme] = useState(
    () => localStorage.getItem("theme") || "light"
  );

  const [enableColors, setEnableColors] = useState(
    JSON.parse(localStorage.getItem("enableColors")) || false
  );

  const [colors, setColors] = useState(() => {
    const storedColors = {};
    ColorProperties.forEach((property) => {
      storedColors[property.name] = localStorage.getItem(property.name) || "";
    });
    return storedColors;
  });

  // setting 2th theme as default page load theme
  const [activeThemeInDefaultThemes, setActiveThemeInDefaultThemes] = useState(
    () => {
      const storedActiveThemeInDefaultThemes = localStorage.getItem(
        "activeThemeInDefaultThemes"
      );
      return storedActiveThemeInDefaultThemes !== null
        ? parseInt(storedActiveThemeInDefaultThemes)
        : 2;
    }
  );

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

  const handleThemeChange = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    setToggleState(false);
  };

  const handleHideThemesModel = () => {
    setToggleState(false);
  };

  const applyDefaultTheme = (themeColors, index) => {
    setColors(themeColors);
    setActiveThemeInDefaultThemes(index);
    ColorProperties.forEach((property) => {
      localStorage.setItem(property.name, themeColors[property.name]);
    });
    localStorage.setItem("enableColors", enableColors);
    localStorage.setItem("activeThemeInDefaultThemes", index);
  };
  useEffect(() => {
    if (storedCustomThemes) {
      if (enableColors) {
        const storedThemeColors = {};
        ColorProperties.forEach((property) => {
          storedThemeColors[property.name] =
            localStorage.getItem(property.name) || "";
        });
        applyCustomTheme(storedThemeColors, activeThemeInCustomThemes);
      } else {
        applyCustomTheme(
          storedCustomThemes[activeThemeInCustomThemes].colors,
          activeThemeInCustomThemes
        );
      }
    }
    // eslint-disable-next-line
  }, [activeThemeInCustomThemes]);
  useEffect(() => {
    if (enableColors) {
      const storedThemeColors = {};
      ColorProperties.forEach((property) => {
        storedThemeColors[property.name] =
          localStorage.getItem(property.name) || "";
      });
      applyDefaultTheme(storedThemeColors, activeThemeInDefaultThemes);
    } else {
      applyDefaultTheme(
        storedDefaultThemes[activeThemeInDefaultThemes].colors,
        activeThemeInDefaultThemes
      );
    }
    // eslint-disable-next-line
  }, [activeThemeInDefaultThemes]);

  useEffect(() => {
    const applyColors = () => {
      ColorProperties.forEach((property) => {
        document.documentElement.style.setProperty(
          property.cssVar,
          colors[property.name]
        );
      });
    };

    applyColors();
  }, [colors]);

  const applyCustomTheme = useCallback(
    (themeColors, index) => {
      setColors(themeColors);
      setActiveThemeInCustomThemes(index);
      ColorProperties.forEach((property) => {
        localStorage.setItem(property.name, themeColors[property.name]);
      });
      localStorage.setItem("enableColors", enableColors);
      localStorage.setItem("activeThemeInCustomThemes", index);
    },
    [enableColors, setColors, setActiveThemeInCustomThemes]
  );

  return (
    <>
      <button
        title="themes"
        type="button"
        className="themes__button"
        onClick={() => {
          setToggleState(!toggleState);
        }}
      >
        {!toggleState ? (
          <i className="bx bx-palette themes__icon"></i>
        ) : (
          <i className="bx bx-x themes__icon"></i>
        )}
      </button>
      <AnimatePresence>
        {toggleState && (
          <motion.div
            className="themes__model sansiv__root active-model"
            initial="hidden"
            animate="visible"
            exit="exit"
            variants={modalVariantsForThemes}
          >
            <motion.div
              className="themes__model-container"
              initial="hidden"
              animate="visible"
              exit="exit"
              variants={childVariants}
            >
              <div className="themes__model-content ">
                <ToggleSwitch
                  id="DarkModeCheckbox"
                  modelTitle={
                    theme === "light" ? "Enable Dark Mode" : "Disable Dark Mode"
                  }
                  checked={theme === "dark"}
                  onChange={handleThemeChange}
                  icons={["bx bxs-moon ", "bx bxs-sun "]}
                />
              </div>
            </motion.div>

            <ColorPicker
              activeThemeInCustomThemes={activeThemeInCustomThemes}
              setActiveThemeInCustomThemes={setActiveThemeInCustomThemes}
              applyCustomTheme={applyCustomTheme}
              storedCustomThemes={storedCustomThemes}
              storedDefaultThemes={storedDefaultThemes}
              applyDefaultTheme={applyDefaultTheme}
              activeThemeInDefaultThemes={activeThemeInDefaultThemes}
              setActiveThemeInDefaultThemes={setActiveThemeInDefaultThemes}
              colors={colors}
              setColors={setColors}
              enableColors={enableColors}
              setEnableColors={setEnableColors}
              handleHideThemesModel={handleHideThemesModel}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const SansivThemes = ({ children }) => {
  return <ThemeProvider>{children}</ThemeProvider>;
};

export default SansivThemes;