'use client';

import { useDebouncedOnChangeCallback, useFocus } from './hooks';
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) => void;
  readonly readOnly?: boolean;
  readonly rows?: number;
  readonly value: string;
};

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

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

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <textarea
        className="flex w-full resize-none rounded-md border border-input bg-secondary px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
        disabled={disabled || isPending}
        id={id}
        onChange={handleChange}
        readOnly={readOnly}
        ref={textareaRef as React.Ref<HTMLTextAreaElement>}
        rows={rows}
        value={value}
      />
    </div>
  );
}