import { useState, useEffect } from "react";

interface SwitchProps {
  label: string;
  defaultChecked?: boolean;
  checked?: boolean; // Controlled mode - when provided, component is controlled
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
  color?: "blue" | "gray"; // Added prop to toggle color theme
}

const Switch: React.FC<SwitchProps> = ({
  label,
  defaultChecked = false,
  checked, // Controlled mode
  disabled = false,
  onChange,
  color = "blue", // Default to blue color
}) => {
  // Use controlled mode if 'checked' prop is provided, otherwise use uncontrolled
  const isControlled = checked !== undefined;
  const [internalChecked, setInternalChecked] = useState(defaultChecked);
  
  // Sync internal state with controlled prop - only update when checked actually changes
  useEffect(() => {
    if (isControlled && checked !== internalChecked) {
      setInternalChecked(checked);
    }
  }, [checked, isControlled, internalChecked]);
  
  // Sync internal state with defaultChecked prop changes (for uncontrolled mode)
  useEffect(() => {
    if (!isControlled && defaultChecked !== internalChecked) {
      setInternalChecked(defaultChecked);
    }
  }, [defaultChecked, isControlled, internalChecked]);
  
  // Use controlled value directly, or fallback to internal state
  const isChecked = isControlled ? (checked ?? false) : internalChecked;

  const handleToggle = () => {
    if (disabled) return;
    const newCheckedState = !isChecked;
    
    // Only update internal state if uncontrolled
    if (!isControlled) {
      setInternalChecked(newCheckedState);
    }
    
    // Always call onChange callback
    if (onChange) {
      onChange(newCheckedState);
    }
  };

  const switchColors =
    color === "blue"
      ? {
          background: isChecked
            ? "bg-brand-500 "
            : "bg-gray-200 dark:bg-white/10", // Blue version
          knob: isChecked
            ? "translate-x-full bg-white"
            : "translate-x-0 bg-white",
        }
      : {
          background: isChecked
            ? "bg-gray-800 dark:bg-white/10"
            : "bg-gray-200 dark:bg-white/10", // Gray version
          knob: isChecked
            ? "translate-x-full bg-white"
            : "translate-x-0 bg-white",
        };

  return (
    <label
      className={`flex cursor-pointer select-none items-center gap-3 text-sm font-medium ${
        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400"
      }`}
      onClick={handleToggle} // Toggle when the label itself is clicked
    >
      <div className="relative">
        <div
          className={`block transition duration-150 ease-linear h-6 w-11 rounded-full ${
            disabled
              ? "bg-gray-100 pointer-events-none dark:bg-gray-800"
              : switchColors.background
          }`}
        ></div>
        <div
          className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full shadow-theme-sm duration-150 ease-linear transform ${switchColors.knob}`}
        ></div>
      </div>
      {label}
    </label>
  );
};

export default Switch;
