import { useEffect, useState } from "react";
import { Switches } from "../../Switches";
import { transform } from "lodash";

const DarkMode = () => {
  // Initialize the theme state from local storage or default to 'dark'
  const [theme, setTheme] = useState(
    localStorage.getItem("selectedTheme") || "dark"
  );

  useEffect(() => {
    // Update the HTML element's data-theme attribute whenever the theme state changes
    document.documentElement.setAttribute("data-theme", theme);
    // Save the current theme to local storage
    localStorage.setItem("selectedTheme", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  // Define custom styles to rotate the switch button
  const customSwitchStyles = {
    transform: "rotate(90deg)",
  };

  return (
    <Switches
      size="large" // Adjust the size as needed
      type="lg-switches" // Adjust the type as needed
      value={theme === "dark"}
      onChange={toggleTheme}
      customStyles={customSwitchStyles} // Add any custom styles if needed
      content={theme === "dark" ? "D" : "L"}
    />
  );
};

export default DarkMode;
