/* eslint-disable consistent-return */
/* eslint-disable no-return-assign */
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { staticMessages } from '~/driven/utils/constants/staticMessages';

export interface IOtpCodeView {
  otpChar: React.MutableRefObject<HTMLInputElement[]>;
  eventHandlers: {
    handleFocusInput: (e: React.FocusEvent) => void;
    handleKeyPressInput: (e: React.KeyboardEvent) => void;
  };
}

export default function OtpCodeView(props: IOtpCodeView) {
  const { eventHandlers, otpChar } = props;
  const { handleFocusInput, handleKeyPressInput } = eventHandlers;
  const otpInputs = Array.from({ length: 6 }).map((digit, i) => (
    <input
      tabIndex={i + 1}
      ref={(el: HTMLInputElement) => (otpChar.current[i] = el)}
      key={`otp_char_${i}`}
      className='font-bold text-base inline-block w-5 md:w-10 bg-transparent text-center focus:outline-none'
      maxLength={1}
      defaultValue='_'
      placeholder='_'
      onClick={(e) => e.stopPropagation()}
      onFocus={handleFocusInput}
      onKeyDown={handleKeyPressInput}
    />
  ));
  return (
    <div className='mb-9 justify-end items-center text-xs self-start'>
      <div className='text-xs mb-9 self-start text-txt-medium'>{staticMessages.global.enterOtpCode}</div>
      <div className='w-full flex gap-4'>{otpInputs}</div>
    </div>
  );
}