import React, { useState, useEffect } from "react";
import "../css/Switch.css";
import "animate.css";
import styled from "styled-components";
import SunIcon from "../assets/icons/colorModeToggle/sun.svg?react";
import MoonIcon from "../assets/icons/colorModeToggle/moon.svg?react";
import { useTheme } from "../Context/ThemeContext";

const SwitchBtn = styled.button`
  background-color: ${(props) =>
    props.colormode === "dark" ? "#000767" : "#009d28"};
  border: 1px solid
    ${(props) => (props.colormode === "dark" ? "#f6f1d5" : "#fff145")};
  border-radius: 99px;
  width: 50px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.748);
  position: relative;
`;

const SwitchContainer = styled.div`
  grid-area: 8 / 4 / 10 / 5; /* Default grid-area */
  transition: background-color 1s ease;
  background-color: ${(props) =>
    props.colormode === "dark" ? "#131862" : "#69d0ff"};
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 1px solid
    ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
  position: relative;

  /* Media query for max-width: 450px */
  @media (max-width: 450px) {
    grid-area: 14 / 4 / 16 / 5;
  }

  /* Media query for max-width: 450px when parent has .gridContainer.contact */
  @media (max-width: 450px) {
    .gridContainer.contact & {
      grid-area: 8/4/10/4; /* Custom grid-area for this scenario */
    }
  }
`;

const StyledSunIcon = styled(SunIcon)`
  fill: #fff145;
`;

const StyledMoonIcon = styled(MoonIcon)`
  fill: #f6f1d5;
`;

const PlanetsContainer = styled.div`
  transition: transform 0.5s ease-in-out;
  transform: ${(props) => `rotate(${props.rotation}deg)`};
`;

const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const { colormode, toggleColorMode } = useTheme();
  const [rotation, setRotation] = useState(0);

  const handleClick = () => {
    toggleColorMode();
    setRotation((prevRotation) => prevRotation + 90);
  };

  return (
    <SwitchContainer
      colormode={colormode}
      className={`container animate__animated ${initialAnimation}`}
      onAnimationEnd={() => onAnimationEnd && onAnimationEnd()}
    >
      <div className="wrapper">
        <PlanetsContainer rotation={rotation} className="planets">
          <StyledMoonIcon
            colormode={colormode}
            className={`moon1 toggleIcon ${
              colormode === "dark" ? "setting" : "rising"
            }`}
          />
          <StyledSunIcon
            colormode={colormode}
            className={`sun1 toggleIcon ${
              colormode === "dark" ? "rising" : "setting"
            }`}
          />
          <StyledMoonIcon
            colormode={colormode}
            className={`moon2 toggleIcon ${
              colormode === "dark" ? "rising" : "setting"
            }`}
          />
          <StyledSunIcon
            colormode={colormode}
            className={`sun2 toggleIcon ${
              colormode === "dark" ? "setting" : "rising"
            }`}
          />
        </PlanetsContainer>
      </div>
      <SwitchBtn
        colormode={colormode}
        className={`colormodeBtn ${colormode}Btn`}
        onClick={handleClick}
      >
        <div className={`colorToggleThumb ${colormode}`}></div>
      </SwitchBtn>
    </SwitchContainer>
  );
};

export default Switch;
