import { usePage } from "@inertiajs/react";

import InputError from "@/back/Components/InputError";
import WordCounter from "@/back/Components/WordCounter";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { type MinMax } from "@/hooks/use-laravel-validation";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface SimpleTextareaProps {
  className?: string;
  name: string;
  label: string;
  value?: string;
  id?: string;
  placeholder?: string;
  wordCounter?: boolean;
  limits?: MinMax;
  required?: boolean;
  disabled?: boolean;
  parentErrors?: Record<string, string> | null;
  onBlur?: () => void;
  setData: (name: string, value: string) => void;
}

export default function SimpleTextarea({
  className,
  name,
  label,
  value = "",
  id = name,
  placeholder = "uwil-backend::back.enter_text_here",
  wordCounter = true,
  limits,
  required = true,
  disabled = false,
  parentErrors = null,
  onBlur,
  setData,
}: Readonly<SimpleTextareaProps>) {
  const { errors } = usePage().props;
  const localErrors = { ...errors, ...parentErrors };

  return (
    <div
      className={cn(
        "flex flex-col w-full justify-between items-start gap-1.5",
        className,
      )}
    >
      <Label htmlFor={id} className="font-bold flex items-center gap-1.5">
        {label}
        {required && " *"}
      </Label>
      {wordCounter && <WordCounter value={value} limits={limits} />}
      <div className="flex w-full">
        <Textarea
          id={id}
          name={name}
          placeholder={trans(placeholder)}
          defaultValue={value}
          onChange={(e) => {
            setData(name, e.target.value);
          }}
          required={required}
          disabled={disabled}
          className={cn("w-full", {
            "border-destructive/50": localErrors[name],
          })}
          onBlur={onBlur}
        />
      </div>
      <InputError message={localErrors[name]} />
    </div>
  );
}