import React from "react";
import { cn } from "../../lib/cn";

/* Варианты размера контейнера */
const sizeVariants = {
  sm: "h-6 w-10",
  md: "h-7 w-12",
  lg: "h-8 w-14",
};

/* Варианты для скользящего шарика */
const switchVariants = {
  size: {
    sm: "h-4 w-4",
    md: "h-5 w-5",
    lg: "h-6 w-6",
  },
  activeSize: {
    sm: "group-active:w-5",
    md: "group-active:w-6",
    lg: "group-active:w-7",
  },
  iconSize: {
    sm: "h-3 w-3",
    md: "h-[0.875rem] w-[0.875rem]",
    lg: "h-4 w-4",
  },
};

const colorsVariants = {
  default: "bg-default",
  primary: "bg-liquid-brightmain",
  secondary: "bg-liquid-darkmain",
  success: "bg-liquid-green",
  warning: "bg-liquid-orange",
  danger: "bg-liquid-red",
};

const focuseOutlineVariants = {
  default: "[&:focus-visible+*]:outline-default",
  primary: "[&:focus-visible+*]:outline-liquid-brightmain",
  secondary: "[&:focus-visible+*]:outline-liquid-darkmain",
  success: "[&:focus-visible+*]:outline-liquid-green",
  warning: "[&:focus-visible+*]:outline-liquid-orange",
  danger: "[&:focus-visible+*]:outline-liquid-red",
};

/**
 * Иконка солнца
 */
const sun = (
  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M6 9.5C7.933 9.5 9.5 7.933 9.5 6C9.5 4.067 7.933 2.5 6 2.5C4.067 2.5 2.5 4.067 2.5 6C2.5 7.933 4.067 9.5 6 9.5Z"
      fill="#292D32"
    />
    <path
      d="M6 11.48C5.725 11.48 5.5 11.275 5.5 11V10.96C5.5 10.685 5.725 10.46 6 10.46C6.275 10.46 6.5 10.685 6.5 10.96C6.5 11.235 6.275 11.48 6 11.48ZM9.57 10.07C9.44 10.07 9.315 10.02 9.215 9.925L9.15 9.86C8.955 9.665 8.955 9.35 9.15 9.155C9.345 8.96 9.66 8.96 9.855 9.155L9.92 9.22C10.115 9.415 10.115 9.73 9.92 9.925C9.825 10.02 9.7 10.07 9.57 10.07ZM2.43 10.07C2.3 10.07 2.175 10.02 2.075 9.925C1.88 9.73 1.88 9.415 2.075 9.22L2.14 9.155C2.335 8.96 2.65 8.96 2.845 9.155C3.04 9.35 3.04 9.665 2.845 9.86L2.78 9.925C2.685 10.02 2.555 10.07 2.43 10.07ZM11 6.5H10.96C10.685 6.5 10.46 6.275 10.46 6C10.46 5.725 10.685 5.5 10.96 5.5C11.235 5.5 11.48 5.725 11.48 6C11.48 6.275 11.275 6.5 11 6.5ZM1.04 6.5H1C0.725 6.5 0.5 6.275 0.5 6C0.5 5.725 0.725 5.5 1 5.5C1.275 5.5 1.52 5.725 1.52 6C1.52 6.275 1.315 6.5 1.04 6.5ZM9.505 2.995C9.375 2.995 9.25 2.945 9.15 2.85C8.955 2.655 8.955 2.34 9.15 2.145L9.215 2.08C9.41 1.885 9.725 1.885 9.92 2.08C10.115 2.275 10.115 2.59 9.92 2.785L9.855 2.85C9.76 2.945 9.635 2.995 9.505 2.995ZM2.495 2.995C2.365 2.995 2.24 2.945 2.14 2.85L2.075 2.78C1.88 2.585 1.88 2.27 2.075 2.075C2.27 1.88 2.585 1.88 2.78 2.075L2.845 2.14C3.04 2.335 3.04 2.65 2.845 2.845C2.75 2.945 2.62 2.995 2.495 2.995ZM6 1.52C5.725 1.52 5.5 1.315 5.5 1.04V1C5.5 0.725 5.725 0.5 6 0.5C6.275 0.5 6.5 0.725 6.5 1C6.5 1.275 6.275 1.52 6 1.52Z"
      fill="#292D32"
    />
  </svg>
);

/**
 * Иконка луны
 */
const moon = (
  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M10.765 7.965C10.685 7.83 10.46 7.62 9.89999 7.72C9.58999 7.775 9.27499 7.8 8.95999 7.785C7.79499 7.735 6.73999 7.2 6.00499 6.375C5.35499 5.65 4.95499 4.705 4.94999 3.685C4.94999 3.115 5.05999 2.565 5.28499 2.045C5.50499 1.54 5.34999 1.275 5.23999 1.165C5.12499 1.05 4.85499 0.890001 4.32499 1.11C2.27999 1.97 1.01499 4.02 1.16499 6.215C1.31499 8.28 2.76499 10.045 4.68499 10.71C5.14499 10.87 5.62999 10.965 6.12999 10.985C6.20999 10.99 6.28999 10.995 6.36999 10.995C8.04499 10.995 9.61499 10.205 10.605 8.86C10.94 8.395 10.85 8.1 10.765 7.965Z"
      fill="#292D32"
    />
  </svg>
);

interface SwitchProps {
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  color?:
    | "default"
    | "primary"
    | "secondary"
    | "success"
    | "warning"
    | "danger";
  label?: string;
  variant?: "default" | "label" | "icon" | "theme";
  className?: string;
  defaultState?: boolean;
  onChange: (state: boolean) => void;
}

export const Switch: React.FC<SwitchProps> = ({
  size = "sm",
  disabled = false,
  color = "primary",
  label = "",
  variant = "default",
  className,
  onChange,
  defaultState = false,
}) => {
  const [active, setActive] = React.useState<boolean>(defaultState);

  React.useEffect(() => onChange(active), [active]);

  return (
    <label
      className={cn(
        variant == "label" && "grid-cols-[auto_1fr] items-center gap-2",
        "grid relative cursor-pointer p-2 select-none group",
        disabled && "pointer-events-none opacity-50",
        className
      )}
    >
      {/* Основной контейнер,  */}
      <div
        className={cn(
          " flex items-center justify-center box-border z-10 relative transition-all duration-300 rounded-full",
          sizeVariants[size],
          active ? colorsVariants[color] : "bg-default-200"
        )}
      >
        {/* Скрытый checkbox */}
        <input
          className={cn(
            "absolute opacity-0 -z-10 h-0 w-0",
            focuseOutlineVariants[color]
          )}
          disabled={disabled}
          type="checkbox"
          onChange={() => {
            setActive(!active);
          }}
        />

        <div
          className={cn(
            "absolute outline-offset-[2.5px] outline-[2.5px] outline outline-transparent transition-all duration-300 rounded-full",
            sizeVariants[size]
          )}
        ></div>

        {/* Шарик */}
        <span
          className={cn(
            "bg-white rounded-full absolute transition-all duration-300  m-1 flex items-center justify-center",
            switchVariants.size[size],
            switchVariants.activeSize[size],
            active
              ? "right-[0%]"
              : "right-[calc(50%-0.25rem)] group-active:right-[calc(50%-0.5rem)]"
          )}
        >
          {variant == "theme" && (
            <>
              <div
                className={cn(
                  "absolute transition-all duration-300",
                  switchVariants.iconSize[size],
                  active ? "opacity-100 scale-100" : "opacity-0 scale-50"
                )}
              >
                {moon}
              </div>
              <div
                className={cn(
                  "absolute transition-all duration-300",
                  switchVariants.iconSize[size],
                  active ? "opacity-0 scale-50" : "opacity-100 scale-100"
                )}
              >
                {sun}
              </div>
            </>
          )}
        </span>
      </div>

      {variant == "label" && (
        <div className="select-none text-layout-foreground transition-all duration-200">
          {label}
        </div>
      )}
    </label>
  );
};