/**
 * LineThroughGroup Component
 *
 * Settings group for line-through effect on sale prices.
 * Contains: enable toggle, style, direction, color, thickness.
 */

import {Switch, Slider, ColorPicker, ButtonGroup} from "../ui";
import type {LineThroughSettings} from "@/types";

interface LineThroughGroupProps {
  lineThrough: LineThroughSettings;
  onUpdate: (lineThrough: LineThroughSettings) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function LineThroughGroup({
  lineThrough,
  onUpdate,
  compact = false,
}: LineThroughGroupProps) {
  const handleChange = <K extends keyof LineThroughSettings>(
    key: K,
    value: LineThroughSettings[K]
  ) => {
    onUpdate({...lineThrough, [key]: value});
  };

  const switchSize = compact ? "sm" : "default";
  const labelClass = compact ? "floating-settings__label" : "settings-label";
  const fieldClass = compact ? "floating-settings__group" : "settings-field";
  const rowClass = compact ? "floating-settings__row" : "settings-field-inline";
  const titleClass = compact
    ? "text-xs font-semibold text-gray-600 mb-2"
    : "settings-section__title";

  return (
    <div className="linethrough-group">
      <h4 className={titleClass}>Line-Through Effect</h4>

      {/* Enable Toggle */}
      <div className={rowClass}>
        <label className={labelClass}>Enable Line-Through</label>
        <Switch
          checked={lineThrough.enabled}
          onCheckedChange={(checked: boolean) =>
            handleChange("enabled", checked)
          }
          size={switchSize}
        />
      </div>

      {lineThrough.enabled && (
        <>
          {/* Style */}
          <div className={`${fieldClass} mt-3`}>
            <label className={labelClass}>Line Style</label>
            <ButtonGroup
              options={[
                {value: "single", label: "—"},
                {value: "double", label: "═"},
                {value: "cross", label: "✕"},
              ]}
              value={lineThrough.style}
              onChange={(value) =>
                handleChange("style", value as "single" | "double" | "cross")
              }
              size={compact ? "compact" : "default"}
            />
          </div>

          {/* Direction - only show for single/double, not cross */}
          {lineThrough.style !== "cross" && (
            <div className={fieldClass}>
              <label className={labelClass}>Direction</label>
              <ButtonGroup
                options={[
                  {value: "horizontal", label: "—"},
                  {value: "diagonal-down", label: "╲"},
                  {value: "diagonal-up", label: "╱"},
                ]}
                value={lineThrough.direction}
                onChange={(value) =>
                  handleChange(
                    "direction",
                    value as "horizontal" | "diagonal-down" | "diagonal-up"
                  )
                }
                size={compact ? "compact" : "default"}
              />
            </div>
          )}

          {/* Color */}
          <div className={fieldClass}>
            <label className={labelClass}>Line Color</label>
            <ColorPicker
              value={lineThrough.color}
              onChange={(value: string) => handleChange("color", value)}
            />
          </div>

          {/* Thickness */}
          <div className={fieldClass}>
            <label className={labelClass}>
              Thickness: {lineThrough.thickness}px
            </label>
            <Slider
              value={lineThrough.thickness}
              onValueChange={(value: number) =>
                handleChange("thickness", value)
              }
              min={1}
              max={10}
              step={1}
            />
          </div>
        </>
      )}
    </div>
  );
}

export default LineThroughGroup;
