import { useTheme } from '@mui/styles'
import { FieldInputProps } from 'formik'
import _get from 'lodash/get'
import MuiPhoneNumber from 'material-ui-phone-number'
import React from 'react'

export interface INumberInField {
  label: string | number | JSX.Element;
  field: FieldInputProps<any>;
}

interface IOtherProps {
  [key: string]: any;
}

export const FormikPhoneNumberField = ({
  label,
  field,
  form: { touched, errors, values },
  setFieldValue,
  selectOptions,
  ...rest
}: INumberInField & IOtherProps) => {
  const error = _get(errors, field.name)
  const isTouched = Boolean(_get(touched, field.name))

  const customTheme: any = useTheme()

  return (
    <MuiPhoneNumber
      name="phone"
      value={values.phone}
      onChange={(e: any) => setFieldValue('phone', e)}
      variant="outlined"
      defaultCountry="us"
      disableDropdown={true}
      label={label}
      error={!!error && isTouched}
      helperText={isTouched && error}
      fullWidth
      InputLabelProps={{
        sx: customTheme?.input,
      }}
      InputProps={{
        sx: customTheme?.input,
      }}
      autoFormat={false}
      {...rest}
    />
  )
}