/* eslint-disable react-hooks/exhaustive-deps */
import React, { ReactElement, useState, useEffect, useRef } from 'react';
import VerificationInput from 'react-verification-input';

import './CodeInput.style.scss';
import { Props } from './CodeInput.types';
import InputMessage, { getFilteredMessages } from '../InputMessage';
import classnames from 'classnames';
import { STYLE } from './CodeInput.constants';

/**
 * @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
 */
const CodeInput: React.FC<Props> = (props: Props): ReactElement => {
  const {
    numDigits,
    clearComplete = true,
    onChange = () => {
      /* Optional */
    },
    onComplete = () => {
      /* Optional */
    },
    ariaLabel,
    ariaDescribedby,
    messageArr = [],
    disabled = false,
    className,
    inputId,
  } = props;

  const [internalMessageArray, setInternalMessageArray] = useState(messageArr);
  const [isComplete, setComplete] = useState(false);
  const [value, setValue] = useState('');

  const [messageType, messages] = getFilteredMessages(internalMessageArray);

  const firstUpdate = useRef(true);
  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    onChange(value);
    if (value.length === numDigits) {
      onComplete(value);
      setComplete(true);
    }
  }, [value]);

  useEffect(() => {
    setInternalMessageArray(messageArr);
  }, [JSON.stringify(messageArr)]);

  return (
    <div className={classnames(STYLE.wrapper, className)} data-level={messageType}>
      <VerificationInput
        inputProps={{
          'aria-label': ariaLabel,
          'aria-describedby': ariaDescribedby,
          id: inputId,
          name: inputId,
          disabled,
          className: classnames(STYLE.input),
        }}
        containerProps={{
          className: classnames(STYLE.container),
        }}
        length={numDigits}
        onChange={setValue}
        onFocus={() => {
          if (isComplete && !!clearComplete) {
            // When completed, refocusing the input will clear the code and any messages
            setComplete(false);
            setValue('');
            setInternalMessageArray([]);
          }
        }}
        value={value}
        validChars="0-9"
        placeholder=""
        classNames={{
          character: STYLE.character,
          characterInactive: STYLE.characterInactive,
          characterSelected: STYLE.characterSelected,
        }}
      />
      {messages && (
        <div className={STYLE.messages}>
          {messages.map((m, i) => (
            <InputMessage
              className={STYLE.message}
              message={m}
              key={`input-message-${i}`}
              level={messageType}
            />
          ))}
        </div>
      )}
    </div>
  );
};

/**
 * Numeric code input for use with confirmation codes
 */

export default CodeInput;