import { TextArea as AstryxTextArea } from '@astryxdesign/core/TextArea'
import { useId, type JSX } from 'react'
import { FieldShell, type FieldLabelMode } from './internal/field'

export interface TextAreaProps {
  label: string
  value: string
  onValueChange(value: string): void
  labelMode?: FieldLabelMode
  hint?: string
  error?: string
  id?: string
  rows?: number
  placeholder?: string
  disabled?: boolean
  isDisabled?: boolean
  name?: string
  maxLength?: number
  'data-testid'?: string
}

export function TextArea({
  label,
  value,
  onValueChange,
  labelMode = 'above',
  hint,
  error,
  rows = 4,
  isDisabled,
  disabled,
  name,
  id: _id,
  ...rest
}: TextAreaProps): JSX.Element {
  const shellId = useId()
  const disabledState = isDisabled ?? disabled
  const needsShell = labelMode === 'inline'
  const control = (
    <AstryxTextArea
      {...rest}
      label={label}
      isLabelHidden={needsShell ? true : labelMode === 'hidden'}
      value={value}
      rows={rows}
      htmlName={name}
      isDisabled={disabledState}
      onChange={(next) => onValueChange(next)}
      description={hint}
      status={error !== undefined ? { type: 'error', message: error } : undefined}
    />
  )

  if (!needsShell) return control

  return (
    <FieldShell controlId={shellId} label={label} labelMode={labelMode}>
      {control}
    </FieldShell>
  )
}