// Adapted from Mantine SegmentedControl (MIT). See THIRD_PARTY_NOTICES.md.
import { useId, useState, type CSSProperties, type ReactNode } from "react";

export interface SegmentedControlItem {
  value: string;
  label: ReactNode;
  disabled?: boolean;
}

export interface SegmentedControlProps {
  label: string;
  data: readonly SegmentedControlItem[];
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  name?: string;
  disabled?: boolean;
  readOnly?: boolean;
  orientation?: "horizontal" | "vertical";
  fullWidth?: boolean;
  className?: string;
  style?: CSSProperties;
}

export function SegmentedControl({
  label,
  data,
  value,
  defaultValue,
  onChange,
  name,
  disabled = false,
  readOnly = false,
  orientation = "horizontal",
  fullWidth = false,
  className = "",
  style,
}: SegmentedControlProps) {
  const generatedName = useId();
  const groupName = name ?? generatedName;
  const fallback = data.find((item) => !item.disabled)?.value ?? "";
  const [internalValue, setInternalValue] = useState(defaultValue ?? fallback);
  const selected = value ?? internalValue;

  const select = (next: string) => {
    if (readOnly) return;
    if (value === undefined) setInternalValue(next);
    onChange?.(next);
  };

  return (
    <fieldset
      className={`ynr-segmented-control ${className}`}
      style={style}
      disabled={disabled}
      data-orientation={orientation}
      data-full-width={fullWidth || undefined}
    >
      <legend className="ynr-segmented-control-legend">{label}</legend>
      <div className="ynr-segmented-control-options">
        {data.map((item) => {
          const inputId = `${generatedName}-${item.value}`;
          return (
            <label
              key={item.value}
              className="ynr-segmented-control-option"
              data-disabled={disabled || item.disabled || undefined}
              data-read-only={readOnly || undefined}
            >
              <input
                id={inputId}
                type="radio"
                name={groupName}
                value={item.value}
                checked={selected === item.value}
                disabled={item.disabled}
                readOnly={readOnly}
                onChange={() => select(item.value)}
              />
              <span>{item.label}</span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}