admin/components/consumer/input/ConsumerTextareaField.tsx

'use client'

import { Controller, type Control } from 'react-hook-form'

import ConsumerFieldShell from '@/components/consumer/input/ConsumerFieldShell'
import type { ConsumerInputRadius, ConsumerInputTone } from '@/components/consumer/input/consumerInputTypes'
import {
  CONSUMER_FIELD_INPUT_CLASS,
  buildConsumerTextareaWrapper,
  resolveConsumerTone,
  withConsumerFieldError,
} from '@/components/consumer/input/consumerInputStyles'
import { Textarea } from '@/components/heroui/Input'
import { cn } from '@/lib/cn'

interface Props {
  autoFocus?: boolean
  className?: string
  radius: ConsumerInputRadius
  control: Control
  description?: React.ReactNode
  disabled?: boolean
  isClearable: boolean
  inputWrapper?: string
  label?: string
  name: string
  placeholder?: string
  readonly?: boolean
  required?: boolean
  textAreaMinRows: number
  tone?: ConsumerInputTone
  onBlur?: () => void
}

export default function ConsumerTextareaField({
  autoFocus,
  className,
  radius,
  control,
  description,
  disabled,
  isClearable,
  label,
  name,
  placeholder,
  readonly,
  required,
  textAreaMinRows,
  tone,
  inputWrapper,
  onBlur,
}: Props) {
  const resolvedTone = resolveConsumerTone('textarea', tone)
  const wrapper = cn(buildConsumerTextareaWrapper({ radius: radius, tone: resolvedTone }), inputWrapper)

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState: { error } }) => {
        const invalid = !!error
        const inputWrapper = invalid ? withConsumerFieldError(wrapper) : wrapper
        const canClear = isClearable && !readonly

        return (
          <ConsumerFieldShell
            className={className}
            description={description}
            errorMessage={error?.message}
            invalid={invalid}
            label={label}
            required={required}
          >
            <Textarea
              {...field}
              autoFocus={autoFocus}
              classNames={{ input: CONSUMER_FIELD_INPUT_CLASS, inputWrapper }}
              isClearable={canClear}
              isDisabled={disabled}
              isInvalid={invalid}
              isReadOnly={readonly}
              minRows={textAreaMinRows}
              placeholder={placeholder}
              validationBehavior="aria"
              variant="bordered"
              onBlur={() => {
                field.onBlur()
                onBlur?.()
              }}
              {...(canClear
                ? {
                    onClear: () => {
                      field.onChange('')
                    },
                  }
                : {})}
            />
          </ConsumerFieldShell>
        )
      }}
    />
  )
}