'use client';

import Button from '@/components/button/PrimaryButton';
import InputField from '@/components/input/InputField';
import { AUTH_PAGE_ELEMENT } from '@/enums';
import Image from 'next/image';
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next';

type Props = {
    onChange: React.ChangeEventHandler<HTMLInputElement>;
    value: string;
    pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
    const [error, setError] = useState('');
    const { t } = useTranslation('auth');

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

    useEffect(() => {
        let error = '';
        if (value.length > 0) {
            if (!/^09\d{7,9}$/.test(value)) {
                error = t('Errors.PhoneNumberFormat');
            }
        }

        setError(error);
    }, [t, 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
                priority
            />
            <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='w-full'>
                    <div className='pt-4'>
                        <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
                        <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
                    </div>
                    <InputField
                        valid={!hasError()}
                        aria-errormessage={error}
                        inputMode='tel'
                        autoComplete='tel'
                        className='mt-10 w-full'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
                        labelText={t('Enter.LabelPhoneNumber')}
                        value={value}
                        placeholder='09120000000'
                        onChange={onChange}
                        type='number' />
                </div>
                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
            </div>
        </>
    )
}

export default StepEnterNumber