import React, { useEffect, useState, useCallback } from 'react';
import { validateInput } from '../utils/Helpers';
import './TextInput.scss';

interface Props extends React.HTMLAttributes<HTMLInputElement> {
  form?: any;
  state?: any;
  key_?: number;
  name?: string;
  width?: string;
  setState?: any;
  pattern?: RegExp;
  className?: string;
  required?: boolean;
  submitted?: boolean;
  placeholder?: string;
  inputToInitialize?: any;
  setInputToInitialize?: any;
}

export const TextInput: React.FC<Props> = ({
  key_,
  name,
  form,
  width,
  pattern,
  required,
  setState,
  submitted,
  className = '',
  placeholder = '',
  inputToInitialize,
  setInputToInitialize,
  state = {},
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  children: _children, // TODO: Why does this have `children` (Just pulls this off `rest` to ignore it)
  onChange = (): void => {},
  onBlur = (): void => {},
  ...rest
}) => {
  const [showValidation, setShowValidation] = useState(false);

  const newState = Object.assign({}, state);

  const getErrorMessage = useCallback(
    (value: string) => {
      if (required && value === '') {
        return 'Required';
      } else if (value !== '' && !validateInput(value, pattern)) {
        return `Please enter a valid ${name.toLowerCase()}`;
      } else {
        return '';
      }
    },
    [name, pattern, required],
  );

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const value = event.target.value;
    const error = getErrorMessage(value);

    newState.error = error;
    newState.value = value;
    setState(newState);
    onChange(event);
  };

  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
    !showValidation && setShowValidation(true);
    onBlur(event);
  };

  useEffect(() => {
    if (inputToInitialize === key_) {
      newState['name'] = name;
      if (required) {
        newState.error = 'Required';
      }
      setState(newState);
      setInputToInitialize(key_ + 1);
    }
    return;
  }, [
    inputToInitialize,
    key_,
    name,
    newState,
    required,
    setInputToInitialize,
    setState,
  ]);

  useEffect(() => {
    if (submitted) {
      newState.error = getErrorMessage(state.value);
      setState(newState);
      setShowValidation(true);
    }
    return;
  }, [getErrorMessage, newState, setState, state.value, submitted]);

  const type = ((name): string => {
    switch (name) {
      case 'email':
        return 'email';
      case 'password':
        return 'password';
      default:
        return 'text';
    }
  })(name.toLocaleLowerCase());

  return (
    <div
      data-show-validation={showValidation}
      className={'mo-display-input__text ' + className}
      style={{ ['--width' as string]: width }}
      data-error={state.error}
    >
      <>
        <label htmlFor={name}>{required ? name + '*' : name}</label>
        <i className="mo-display-icon-exclamation-circle" />
        <i className="mo-display-icon-checkmark" />
        <input
          placeholder={placeholder}
          value={state.value}
          name={name}
          type={type}
          onChange={handleChange}
          onBlur={handleBlur}
          required={required}
          form={form}
          {...rest}
        />
        <div className="mo-display-input-error"> {state.error} </div>
      </>
    </div>
  );
};