/**
 * LineThroughSettings Component
 *
 * Settings for line-through effect on sale prices including
 * style (single/double), color, thickness, and rotation.
 */

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

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

export function LineThroughSettings({
  lineThrough,
  onUpdate,
  compact = false,
}: LineThroughSettingsProps) {
  const handleChange = <K extends keyof LineThroughSettingsType>(
    key: K,
    value: LineThroughSettingsType[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";
  const buttonGroupClass = compact
    ? "floating-popover__button-row"
    : "modal-button-group";
  const toggleBtnClass = compact
    ? "floating-popover__toggle-btn"
    : "modal-toggle-btn";

  return (
    <div className="linethrough-settings">
      <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>
            <div className={buttonGroupClass}>
              <button
                type="button"
                className={`${toggleBtnClass} ${
                  lineThrough.style === "single" ? "active" : ""
                }`}
                onClick={() => handleChange("style", "single")}
              >
                Single
              </button>
              <button
                type="button"
                className={`${toggleBtnClass} ${
                  lineThrough.style === "double" ? "active" : ""
                }`}
                onClick={() => handleChange("style", "double")}
              >
                Double
              </button>
            </div>
          </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 LineThroughSettings;
