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'

type Props = {
    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
    value: string;
    repeatValue: string;
    isReset?: boolean;
    passwordVisible: boolean;
    repeatPasswordVisible: boolean;
    pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
    const [error, setError] = useState('');
    const [error2, setError2] = useState('');

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

    useEffect(() => {
        let error = '';
        let error2 = '';
        if (value.length > 0) {
            if (!/^.{6,}$/.test(value)) {
                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
            }
        }
        if (repeatValue.length > 0) {
            if (!/^.{6,}$/.test(repeatValue)) {
                error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
            } else if (repeatValue !== value) {
                error2 = 'تکرار کلمه عبور  مطابقت ندارد';
            }
        }
        
        setError(error);
        setError2(error2);
    }, [value, repeatValue])

    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' dir='rtl'>
                        <h6 className='text-lg font-bold'>
                            {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
                        </h6>
                        <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
                    </div>
                    <InputField
                        valid={!hasError()}
                        aria-errormessage={error}
                        autoComplete='new-password'
                        className='mt-10'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                        labelText='کلمه عبور'
                        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>
                    <InputField
                        valid={!hasError(error2)}
                        aria-errormessage={error2}
                        autoComplete='new-password'
                        className='mt-6'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
                        labelText='تکرار کلمه عبور'
                        value={repeatValue}
                        placeholder=''
                        onChange={onChange}
                        type={repeatPasswordVisible ? 'text' : 'password'}>
                        <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
                            <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
                        </button>
                    </InputField>
                </div>
                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
            </div>
        </>
    )
}

export default StepNewPassword