zapishis-client/apps/web/components/shared/data-fields/time-field.tsx

'use client';

import { useDebouncedOnChangeCallback, useFocus } from './hooks';
import { Input } from '@repo/ui/components/ui/input';
import { Label } from '@repo/ui/components/ui/label';
import { type ChangeEvent, useState } from 'react';

type FieldProps = {
  readonly disabled?: boolean;
  readonly id: string;
  readonly label: string;
  readonly onChange?: (value: string) => Promise<void> | void;
  readonly readOnly?: boolean;
  readonly value: string;
};

export function TimeField({
  disabled = false,
  id,
  label,
  onChange,
  readOnly,
  value: initialValue,
}: FieldProps) {
  const [value, setValue] = useState(initialValue);
  const { debouncedCallback, isPending } = useDebouncedOnChangeCallback<string>(onChange);
  const inputRef = useFocus(isPending);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
    setValue(newValue);
    debouncedCallback(newValue);
  };

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <Input
        className="bg-secondary outline-none focus:ring-0 focus:ring-offset-0"
        disabled={disabled || isPending}
        id={id}
        onChange={handleChange}
        readOnly={readOnly}
        ref={inputRef}
        required
        type="time"
        value={value}
      />
    </div>
  );
}