import Button from '@/components/button/PrimaryButton';
import OTPInputField from '@/components/input/MultiInputField';
import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
import Image from 'next/image';
import React, { useEffect, useState } from 'react'

type Props = {
    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
    value: string;
    phoneNumber: string;
    timerRunning: boolean;
    secondsLeft: number;
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
    const [error, setError] = useState('');

    const hasError = (e = error) => {
        return e.trim().length > 0
    }

    useEffect(() => {
        let error = '';
        if (!/^\d{6}$/.test(value)) {
            error = 'عبارت کامل نیست';
        }

        setError(error);
    }, [value])

    return (
        <>
            <Image
                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
                src={'/assets/images/login-banner.png'}
                alt='login banner'
                width={100}
                height={100}
                unoptimized={true}
            />
            <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                <div className='pt-4' dir='rtl'>
                    {/* // TODO: add persian digits font */}
                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
                </div>
                <div className='w-full flex justify-center items-center'>
                    <OTPInputField
                        autoFocus
                        autoComplete='one-time-code'
                        type='number'
                        inputMode='numeric'
                        className='mt-10 min-h-14 max-w-[304px]'
                        maxLength={6}
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
                        labelText=''
                        value={value}
                        placeholder=''
                        onChange={onChange} />
                </div>

                <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
                    <div dir='rtl'>
                        {timerRunning ?
                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
                            <div>
                                کد را دریافت نکردید؟
                                <span className='text-primary px-1'>
                                    <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
                                        دوباره امتحان کنید
                                    </button>
                                </span>
                            </div>
                        }
                    </div>
                </div>
                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
            </div>
        </>
    )
}

export default StepEnterOtp