import { useState } from "react";
import { dateToDigital, digitalToDate } from "../utils";

interface DigitalClockProps {
  currentTime: Date;
  onTimeChange: (time: Date) => void;
  disabled?: boolean;
}

export function DigitalClock({
  currentTime,
  onTimeChange,
  disabled = false,
}: DigitalClockProps) {
  const [inputValue, setInputValue] = useState(dateToDigital(currentTime));

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputValue(value);
    const date = digitalToDate(value);
    if (!isNaN(date.getTime())) {
      onTimeChange(date);
    }
  };

  return (
    <div>
      <input
        data-testid="time-input"
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="HH:MM:SS"
        disabled={disabled}
      />
    </div>
  );
}