import React, { FC } from 'react'

import FormField from './form-field'


type FormTextAreaFieldProps = {
  id: string,
  invalidMessage?: string,
  label: string,
  name: string,
  optional?: boolean,
  setValid(valid: boolean): void,
  setValue(value: string): void,
  [other:string]: unknown
}

const isTextAreaFieldValid = (elem: HTMLTextAreaElement): boolean => {
  return elem.value.length > 0
}

const FormTextAreaField:FC<FormTextAreaFieldProps> = ({
  id,
  invalidMessage='Field is required.',
  label,
  optional=false,
  name,
  setValid,
  setValue,
  ...other
}: FormTextAreaFieldProps) => {
  return (
    <FormField
      id={id}
      invalidMessage={invalidMessage}
      label={label}
      name={name}
      optional={optional}
      setValid={setValid}
      setValue={setValue}
      type="textarea"
      validator={isTextAreaFieldValid}
      {...other}
    />
  )
}

export default FormTextAreaField