import React, { useRef, useState } from 'react';
import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton';
import { icons } from '~/driven/utils/constants/assertUrls';
import { staticMessages } from '~/driven/utils/constants/staticMessages';
import OtpCode from '../otp-code-inputs';
import PhoneNumberAuth from './PhoneNumberAuth';

export default function AuthenticationView() {
  const [phoneNumberValue, setPhoneNumberValue] = useState('');
  const otpChar = useRef<HTMLInputElement[]>([]);
  const statesName = {
    phonenumber: <PhoneNumberAuth stateData={{ setState: setPhoneNumberValue, stateValue: phoneNumberValue }} />,
    otp: <OtpCode ref={otpChar} />,
  };
  const [authState, setAuthState] = useState<keyof typeof statesName>('phonenumber');

  const submitForm = (e: React.FormEvent) => {
    e.preventDefault();
    setAuthState('otp');
  };
  return (
    <div className='main-auth flex flex-nowrap justify-start flex-row-reverse h-screen w-screen'>
      <form
        onSubmit={submitForm}
        className='w-full px-7 md:px-20 md:w-[50%] lg:w-[35%]  min-w-[10rem] h-full shadow-lg shadow-slate-400 flex flex-col items-center justify-start pt-12'
      >
        <div className='w-48 h-[35%]'>
          <img src={icons.logoBlack} className='w-full h-12' alt='page icon' />
        </div>
        <div className='font-normal mb-4 text-lg self-start'>{staticMessages.global.enterPanel}</div>
        {statesName[authState]}
        <PrimaryButton
          onClick={() => null}
          title={staticMessages.global.submit}
          className='[background:var(--color-gradient-button)] hover:brightness-90 transition-all w-full h-11'
        />
      </form>
      <div className='hidden md:flex md:w-[50%] lg:w-[65%] h-full' />
    </div>
  );
}