/**
 * PaddingGroup Component
 *
 * Settings group for element padding with responsive support.
 * Contains: top, right, bottom, left padding inputs with linked mode
 * and responsive breakpoint toggles.
 */

import {useState, useCallback} from "react";
import {
  DesktopIcon,
  MobileIcon,
  LaptopIcon,
  LinkBreak2Icon,
  Link2Icon,
} from "@radix-ui/react-icons";

import type {Breakpoint, ResponsiveSpacing} from "@/types";
import {NumberInput} from "../ui";

interface PaddingGroupProps {
  /** Responsive padding values */
  padding: ResponsiveSpacing;
  /** Called when padding changes */
  onUpdate: (padding: ResponsiveSpacing) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function PaddingGroup({
  padding,
  onUpdate,
  compact = true,
}: PaddingGroupProps) {
  // Track current breakpoint
  const [activeBreakpoint, setActiveBreakpoint] =
    useState<Breakpoint>("desktop");
  // Track linked mode (all values change together)
  const [linked, setLinked] = useState(false);

  const labelClass = compact ? "floating-settings__label" : "settings-label";

  // Get current breakpoint values (default to 0 if undefined)
  const getCurrentValues = useCallback(() => {
    return {
      top: padding.top?.[activeBreakpoint] ?? 0,
      right: padding.right?.[activeBreakpoint] ?? 0,
      bottom: padding.bottom?.[activeBreakpoint] ?? 0,
      left: padding.left?.[activeBreakpoint] ?? 0,
    };
  }, [padding, activeBreakpoint]);

  const currentValues = getCurrentValues();

  // Update a single side
  const handleSideChange = useCallback(
    (side: keyof ResponsiveSpacing, value: number) => {
      if (linked) {
        // Update all sides with the same value
        onUpdate({
          top: {...padding.top, [activeBreakpoint]: value},
          right: {...padding.right, [activeBreakpoint]: value},
          bottom: {...padding.bottom, [activeBreakpoint]: value},
          left: {...padding.left, [activeBreakpoint]: value},
        });
      } else {
        // Update only the specified side
        onUpdate({
          ...padding,
          [side]: {...padding[side], [activeBreakpoint]: value},
        });
      }
    },
    [padding, onUpdate, activeBreakpoint, linked]
  );

  return (
    <div className="spacing-group">
      {/* Header with label and breakpoint toggle */}
      <div className="spacing-group__header">
        <label className={labelClass}>Padding</label>

        {/* Breakpoint toggle */}
        <div className="spacing-group__breakpoints">
          <button
            type="button"
            className={`spacing-group__breakpoint-btn ${
              activeBreakpoint === "desktop" ? "active" : ""
            }`}
            onClick={() => setActiveBreakpoint("desktop")}
            title="Desktop"
          >
            <DesktopIcon />
          </button>
          <button
            type="button"
            className={`spacing-group__breakpoint-btn ${
              activeBreakpoint === "tablet" ? "active" : ""
            }`}
            onClick={() => setActiveBreakpoint("tablet")}
            title="Tablet"
          >
            <LaptopIcon />
          </button>
          <button
            type="button"
            className={`spacing-group__breakpoint-btn ${
              activeBreakpoint === "mobile" ? "active" : ""
            }`}
            onClick={() => setActiveBreakpoint("mobile")}
            title="Mobile"
          >
            <MobileIcon />
          </button>
        </div>
      </div>

      {/* Spacing inputs with visual layout */}
      <div className="spacing-group__inputs">
        {/* Top input */}
        <div className="spacing-group__top">
          <NumberInput
            value={currentValues.top}
            onChange={(value) => handleSideChange("top", value)}
            min={0}
            size="compact"
            placeholder="T"
          />
        </div>

        {/* Middle row: Left, Link toggle, Right */}
        <div className="spacing-group__middle">
          <div className="spacing-group__left">
            <NumberInput
              value={currentValues.left}
              onChange={(value) => handleSideChange("left", value)}
              min={0}
              size="compact"
              placeholder="L"
            />
          </div>

          {/* Link toggle button */}
          <button
            type="button"
            className={`spacing-group__link-btn ${linked ? "active" : ""}`}
            onClick={() => setLinked(!linked)}
            title={linked ? "Unlink values" : "Link values"}
          >
            {linked ? <Link2Icon /> : <LinkBreak2Icon />}
          </button>

          <div className="spacing-group__right">
            <NumberInput
              value={currentValues.right}
              onChange={(value) => handleSideChange("right", value)}
              min={0}
              size="compact"
              placeholder="R"
            />
          </div>
        </div>

        {/* Bottom input */}
        <div className="spacing-group__bottom">
          <NumberInput
            value={currentValues.bottom}
            onChange={(value) => handleSideChange("bottom", value)}
            min={0}
            size="compact"
            placeholder="B"
          />
        </div>
      </div>
    </div>
  );
}

export default PaddingGroup;
