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 React from 'react'

type Props = {
    onSubmit: React.FormEventHandler<HTMLFormElement> | undefined;
    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
    value: string;
    repeatValue: string;
    reset?: boolean;
    passwordVisible: boolean;
    repeatPasswordVisible: boolean;
}

function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
    return (
        <form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
            <div className='block'>
                <img src='/assets/images/login-banner.png' />
                <div className='pt-4' dir='rtl'>
                    <h6 className='text-lg font-bold'>
                        { reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
                    </h6>
                    <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
                </div>
                <InputField
                    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={value === repeatValue}
                    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 type='submit'>ورود</Button>
        </form>
    )
}

export default StepNewPassword