import React, { FC } from 'react'

import FormField from './form-field'


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

const isPhoneFieldValid = (elem: HTMLInputElement) => {
  // eslint-disable-next-line
  if (elem.value && /[0-9+\-#()\/\.,\s]{7,20}/.test(elem.value)) {
    return true
  }

  return false
}

const FormPhoneField:FC<FormPhoneFieldProps> = ({
  id,
  invalidMessage='Invalid phone number.',
  label,
  optional=false,
  name,
  setValid,
  setValue,
  ...other
}: FormPhoneFieldProps) => {
  return (
    <FormField
      id={id}
      invalidMessage={invalidMessage}
      label={label}
      name={name}
      optional={optional}
      setValid={setValid}
      setValue={setValue}
      type="tel"
      validator={isPhoneFieldValid}
      {...other}
    />
  )
}

export default FormPhoneField