import { useState } from "react";

import type { MeasurementType, WorkoutSet, WorkoutSetInput } from "../../types";
import { formatSet } from "./setFormat";

export function WorkoutSetRow({
  set,
  measurementType,
  onRemove,
  onUpdate,
  disabled,
}: {
  set: WorkoutSet;
  measurementType: MeasurementType;
  onRemove: () => void;
  onUpdate: (payload: Partial<WorkoutSetInput>) => void;
  disabled?: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [weight, setWeight] = useState(set.weight);
  const [reps, setReps] = useState(set.reps);
  const [durationSeconds, setDurationSeconds] = useState(set.duration_seconds ?? 60);
  const [distanceKm, setDistanceKm] = useState(set.distance_km ?? 1);
  const [calories, setCalories] = useState(set.calories ?? 0);

  function save() {
    if (measurementType === "reps_only") onUpdate({ weight: 0, reps });
    else if (measurementType === "duration") onUpdate({ weight: 0, reps: 0, duration_seconds: durationSeconds });
    else if (measurementType === "distance_duration") onUpdate({ weight: 0, reps: 0, distance_km: distanceKm, duration_seconds: durationSeconds });
    else if (measurementType === "duration_calories") onUpdate({ weight: 0, reps: 0, duration_seconds: durationSeconds, calories });
    else onUpdate({ weight, reps });
    setEditing(false);
  }

  if (editing) {
    return (
      <div className="set-row editing dynamic-set-row">
        <span className="set-index">{set.set_index}</span>
        {(measurementType === "weight_reps") && <input aria-label="Вес подхода" type="number" min="0" step="0.5" value={weight} onChange={(event) => setWeight(Number(event.target.value))} />}
        {(measurementType === "weight_reps" || measurementType === "reps_only") && <input aria-label="Повторы подхода" type="number" min="0" step="1" value={reps} onChange={(event) => setReps(Number(event.target.value))} />}
        {(measurementType === "duration" || measurementType === "distance_duration" || measurementType === "duration_calories") && <input aria-label="Секунды" type="number" min="0" step="5" value={durationSeconds} onChange={(event) => setDurationSeconds(Number(event.target.value))} />}
        {measurementType === "distance_duration" && <input aria-label="Километры" type="number" min="0" step="0.1" value={distanceKm} onChange={(event) => setDistanceKm(Number(event.target.value))} />}
        {measurementType === "duration_calories" && <input aria-label="Калории" type="number" min="0" step="1" value={calories} onChange={(event) => setCalories(Number(event.target.value))} />}
        <div className="set-row-actions">
          <button className="tiny success" disabled={disabled} onClick={save}>OK</button>
          <button className="tiny" onClick={() => setEditing(false)}>×</button>
        </div>
      </div>
    );
  }

  return (
    <div className="set-row">
      <span className="set-index">{set.set_index}</span>
      <button className="set-data" onClick={() => setEditing(true)} title="Редактировать подход">
        {formatSet(set, measurementType)}
      </button>
      <span className="set-cal">{set.calories !== null && set.calories !== undefined ? Math.round(set.calories) : "—"} ккал</span>
      <button className="set-remove" disabled={disabled} onClick={onRemove} aria-label="Удалить подход">×</button>
    </div>
  );
}
