import React from 'react';
import Input from './Input';
import Button from './Button';

import { styled } from 'styled-components';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import Validation from './Validation';

const Regist = () => {
	const {
		register,
		setValue,
		handleSubmit,
		formState: { errors },
		watch,
	} = useForm({
		resolver: yupResolver(validation),
	});

	const values = watch();

	return (
		<>
			<form>
				<Wrap>
					<Title>비밀번호 재설정</Title>

					<InputArea>
						<InputBlock>
							<InputTitle>비밀번호</InputTitle>
							<Input
								id="pw1"
								// onChange={e=> onChangePW(e)}

								register={register}
							/>
							<InfoText>영어/숫자/특수문자만 가능합니다. (8~20자 이내로)</InfoText>
						</InputBlock>

						<InputBlock>
							<InputTitle>비밀번호 확인</InputTitle>
							<Input
								// onChange={e=> onChangePW(e)}
								id="pw2"
								register={register}
							/>
							<ErrorText>비밀번호를 다시 확인해주세요.</ErrorText>
						</InputBlock>

						<ButtonArea>
							<Button
								backColor={values.pw1 && values.pw2 ? '#00A6B5' : '#E1E3ED'}
								color={values.pw1 && values.pw2 ? '#E1E3ED' : '#00A6B5'}
								isDisabled={values.pw1 && values.pw2 ? false : true}
							/>
						</ButtonArea>
					</InputArea>
				</Wrap>
			</form>
		</>
	);
};

export default Regist;

const Wrap = styled.div`
	text-align: center;
	margin: 15%;
`;

const Title = styled.h1`
	font-size: 32px;
	line-height: 40px;
	color: #00626b;
`;

const InputArea = styled.div`
	display: grid;
	justify-content: center;
`;

const InputTitle = styled.p`
	font-size: 16px;
`;

const InputBlock = styled.div`
	width: 320px;
	font-size: 16px;
	text-align: left;
`;

const InfoText = styled.p`
	margin-left: 10px;
	font-size: 13px;
	text-align: left;
	color: #818181;
`;

const ErrorText = styled.p`
	margin-left: 10px;
	font-size: 13px;
	text-align: left;
	color: #fe565e;
`;

const ButtonArea = styled.div`
	display: flex;
	justify-content: right;
	margin-top: 20px;
`;
