import Button from '@/components/button/PrimaryButton';
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
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: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
    value: string;
    passwordVisible: boolean;
    rememberMe: boolean;
    pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: 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 (!/^.{6,}$/.test(value)) {
                error = t('Errors.PasswordLength');
            }
        }

        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('EnterPass.Heading')}</h6>
                        <p className='mt-3 text-[13px]'>{t('EnterPass.Description')}</p>
                    </div>
                    <InputField
                        valid={!hasError()}
                        aria-errormessage={error}
                        autoFocus
                        autoComplete='current-password'
                        className='mt-10'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                        labelText={t('EnterPass.LabelPass')}
                        value={value}
                        placeholder=''
                        onChange={onChange}
                        type={passwordVisible ? 'text' : 'password'}>
                        <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
                            <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
                        </button>
                    </InputField>
                    <div className='inline-flex justify-between items-center w-full pt-3'>
                        <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>
                            {t('EnterPass.ButtonRecover')}
                        </button>

                        <div className='inline-flex justify-between items-center'>
                            {/* TODO: customize checkbox */}
                            <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>
                                {t('EnterPass.LabelRememberance')}
                            </label>
                            <input name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /></div>
                    </div>
                </div>
                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('EnterPass.ButtonSubmit')}</Button>
            </div>
        </>
    )
}

export default StepEnterPassword