import React, { FC } from 'react'

import FormField from './form-field'


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

const isTextFieldValid = (elem: HTMLInputElement): boolean => {
  return elem.value.length > 0
}

const FormTextField:FC<FormTextFieldProps> = ({
  invalidMessage="Field is required.",
  label,
  name,
  optional=false,
  setValid,
  setValue,
  ...other
}: FormTextFieldProps) => {
  return (
    <FormField
      invalidMessage={invalidMessage}
      label={label}
      name={name}
      optional={optional}
      setValid={setValid}
      setValue={setValue}
      type="text"
      validator={isTextFieldValid}
      {...other}
    />
  )
}

export default FormTextField