import React from 'react'

import { FormControlType } from '$theme-components/personalInfo/constants'
import DateField from '$theme-components/personalInfo/DateField'
import SelectField from '$theme-components/personalInfo/SelectField'
import TextField from '$theme-components/personalInfo/TextField'

const FieldByModel = ({ field, ...forwardedProps }) =>
  ({
    [FormControlType.TextInput]: (
      <TextField
        {...forwardedProps}
        isReadOnly={field.IsReadonly}
        isRequired={field.IsMandatory}
        maxLength={field.ControlConfiguration.MaxLength}
        type={fieldNameToInputType[field.Name] ?? 'text'}
      />
    ),
    [FormControlType.DateTimePicker]: (
      <DateField
        {...forwardedProps}
        isDateOnly={field.ControlConfiguration.IsDateOnly}
        isReadOnly={field.IsReadonly}
        isRequired={field.IsMandatory}
      />
    ),
    [FormControlType.DropDownList]: (
      <SelectField
        {...forwardedProps}
        isReadOnly={field.IsReadonly}
        isRequired={field.IsMandatory}
        options={field.Options || []}
      />
    ),
  })[field.ControlConfiguration?.Type]

const fieldNameToInputType = {
  Email: 'email',
  PhoneNumber: 'tel',
  MobileNumber: 'tel',
  FaxNumber: 'tel',
}

export default FieldByModel
