import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

import { RegistValidation } from './RegistValidation';
import { FormBox, AccountTitle, FormWrapper, BtnWrapper } from '../../styles/Components';
import { AccountInputItem } from '../../components/account';
import Button from '../../components/common/button/Button';

import styled from 'styled-components';

const PasswordReset = () => {
    const navigate = useNavigate();
    const [stateModal, setStateModal] = useState('hidden');
	const [submitText, setSubmitText] = useState('');
	const [doubleSubmitFlag, setDoubleSubmitFlag] = useState(false);
	const [isSuccess, setIsSuccess] = useState(false)

    const {
		register,
		formState: { errors },
		watch,
		handleSubmit,
	} = useForm({
		resolver: yupResolver(RegistValidation),
		mode: 'onChange',
	});
    const [form, setForm] = useState({
		userid: '',
        username: ''
	});
    const { userid, username } = form;

    const onChange = e => {
		const nextForm = {
			...form,
			[e.target.name]: e.target.value,
		};
		setForm(nextForm);
	};

    const AccountRegistData = [
        {
			title: '이름',
			type: 'text',
			name: 'username',
			placeholder: '한글, 영문 입력 가능',
			value: username,
		},
		{
			title: 'ID(메일주소)',
			type: 'text',
			name: 'userid',
			placeholder: '가입한 메일주소를 입력해주세요.(sample@lotte.net)',
			value: userid,
		}
	];

    return (
        <>
            <FormBox>
                <AccountTitle>비밀번호 찾기</AccountTitle>
                {AccountRegistData.map((data, index) => (
						<AccountInputItem
							key={index}
							title={data.title}
							type={data.type}
							name={data.name}
							placeholder={data.placeholder}
							alertText={data.alertText}
							value={data.value}
							onChange={onChange}
							register={register}
							errors={errors}
							length={data.length && data.length}
						/>
					))}
                <PwdBtnWrapper $justify="space-between" $gap="14px">
						<Button
							theme="line"
							size="large"
							text="취소"
							width="100%"
							handleClick={e => {
								e.preventDefault();
								navigate('/');
							}}
							bordercolor="#e4e4e4"
						/>

						<Button
							errorMessage={doubleSubmitFlag === true}
							size="large"
							text="비밀번호 찾기"
							type="submit"
							width="100%"
							theme={errors.username || errors.userid || errors.password || errors.confirmPassword ? 'disable' : 'primary'}
						/>
					</PwdBtnWrapper>
            </FormBox>
        </>
    );
}
export default PasswordReset;

const PwdBtnWrapper = styled(BtnWrapper)`
	margin-top: 25px;
	justify-content: space-between;
	gap: 14px;
`;