// * eslint-disable no-unused-vars */
/* eslint-disable no-use-before-define */
/* eslint-disable import/prefer-default-export */
import { ChangeEvent, FocusEvent } from 'react'

export interface TextAreaProps {
  id?: string
  testId?: string
  horizontal?: boolean
  placeholder?: string
  value: string | number | null
  label?: string
  name: string
  error?: string | null
  disabled?: boolean
  center?: boolean
  cols?: number
  rows?: number
  customInputStyles?: string
  inputWidth?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void
}

export const TextArea = (props: TextAreaProps) => {
  const {
    id,
    testId,
    horizontal,
    placeholder,
    value,
    label,
    name,
    disabled,
    center,
    error,
    cols,
    rows,
    customInputStyles,
    inputWidth,
    onChange,
    onBlur,
  } = props

  const outlineTextArea = 'border border-inputBorder text-sm'
  const textAreaClass = 'rounded-lg flex items-center'

  return (
    <div
      className={`flex w-full ${horizontal ? 'flex-col md:flex-row md:items-start' : 'flex-col justify-start'} gap-1`}
    >
      <div className={horizontal ? 'md:w-[30%] md:mt-2' : ''}>
        {label && (
          <label htmlFor={name} className="text-sm px-1 text-secondary">
            {label}
          </label>
        )}
      </div>

      <div className={horizontal ? inputWidth ?? 'md:w-[70%] w-full' : 'w-full'}>
        <div className={`${textAreaClass} ${outlineTextArea}`}>
          <textarea
            id={id}
            data-test-id={testId}
            placeholder={placeholder}
            value={value || ''}
            onChange={onChange}
            cols={cols}
            rows={rows}
            name={name}
            onBlur={onBlur}
            disabled={Boolean(disabled)}
            className={`py-2 px-2 w-full focus:outline-none rounded-lg
              ${center ? 'text-center' : ''}
              ${value ? 'text-secondary' : 'placeholder-gray-500'}
              ${customInputStyles ?? ''}`}
          />
        </div>
        {error && <span className="text-red-500 text-sm">{error}</span>}
      </div>
    </div>
  )
}