import React, {ChangeEvent, FocusEvent} from 'react';
import _ from 'lodash';
import {TextField} from '@material-ui/core';
import classnames from 'classnames';
import PhoneInput from './PhoneInput';
import {TField} from '../types';

const Field = ({
  className,
  name,
  type = 'text',
  label,
  placeholder,
  field = {
    value: '',
    error: true
  },
  required,
  disabled,
  onChange,
  onBlur
}: TField): JSX.Element => {
  const {value, error} = field;

  const handleChange = (event: ChangeEvent): void => {
    const value = _.isObject(event) ? _.get(event, 'target.value') : event;

    _.isFunction(onChange) && onChange(name, value);
  };

  const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
    const value = _.isObject(event) ? _.get(event, 'target.value') : event;
    const type = _.isObject(event) && _.get(event, 'target.type');

    _.isFunction(onBlur) && onBlur();

    if (type === 'email') {
      event.target.value = '';
    }

    _.isFunction(onChange) && onChange(name, _.trim(value));
  };

  return (
    <TextField
      className={classnames('smpz-form-mui-control', className)}
      InputLabelProps={{
        classes: {
          root: `smpz-form-mui-control-label`,
          focused: `smpz-form-mui-control-label--focused`
        }
      }}
      InputProps={{
        inputComponent: type === 'tel' ? PhoneInput : 'input',
        classes: {
          root: `smpz-form-mui-control-input-root`,
          input: `smpz-form-mui-control-input`,
          focused: `smpz-form-mui-control-input--focused`
        }
      }}
      type={type}
      name={name}
      value={value}
      label={label}
      error={Boolean(error)}
      disabled={disabled}
      placeholder={placeholder}
      required={required}
      onChange={handleChange}
      onBlur={handleBlur}
      fullWidth
      autoComplete="off"
    />
  );
};

export default Field;