import React, { useCallback, useState } from "react";
import "../style/RegisterPage.scss"

function RegisterPage(props) {
  
  const [Name, setName] = useState("");
  const [Sex, setSex] = useState("");
  const [Id, setId] = useState("");
  const [Password, setPassword] = useState("");
  const [PasswordCheck, setPasswordCheck] = useState("");
  const [PasswordError, setPasswordError] = useState(false);

  const [checkNameError, setCheckNameError] = useState(false);
  const [checkSexError, setCheckSexError] = useState(true);
  const [checkIdError, setCheckIdError] = useState(false);
  const [checkPasswordError, setCheckPasswordError] = useState(false);
  const [checkRegisterError, setCheckRegisterError] = useState(false);

  const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;

  const onIdHandler = useCallback((event) => {
    setId(event.currentTarget.value);

    // 아이디 유효성 검사
    if (!idRegex.test(event.currentTarget.value)) {
      setCheckIdError(true);
    }
    else {
      setCheckIdError(false);
    }

  }, [checkIdError]);

  const onNameHandler = useCallback((event) => {
    setName(event.currentTarget.value);

    // 이름 유효성 검사
    if (event.currentTarget.value.length < 2) {
      setCheckNameError(true);
    }
    else {
      setCheckNameError(false);
    }
  }, [checkNameError]);

  const onSexHandler = useCallback((event) => {
    setSex(event.currentTarget.value);
    setCheckSexError(false);
  }, [checkSexError]);

  const onPasswordHandler = useCallback((event) => {
    setPassword(event.currentTarget.value);

    // 비밀번호 유효성 검사
    if (!passwordRegex.test(event.currentTarget.value)) {
      setCheckPasswordError(true);
    }
    else {
      setCheckPasswordError(false);
    }
  }, [checkPasswordError]);

  const onPasswordCheckHandler = useCallback((event) => {
    //비밀번호를 입력할때마다 password 를 검증하는 함수
    setPasswordError(event.currentTarget.value !== Password);
    setPasswordCheck(event.currentTarget.value);
  },[PasswordError]);

  const onSubmitHandler = useCallback((event) => {
    event.preventDefault();

    if (checkIdError || Id === "") {
      setCheckRegisterError(true);
    }
    else if (checkNameError || Name === "") {
      setCheckRegisterError(true);
    }
    else if (checkSexError || Sex === "") {
      setCheckRegisterError(true);
    }
    else if (checkPasswordError || Password === "") {
      setCheckRegisterError(true);
    }
    else if (Password !== PasswordCheck) {
      setCheckRegisterError(true);
    }
    else {
      setCheckRegisterError(false);
    }

    if (!checkRegisterError) {
      const userdata = {
        name: Name,
        id: Id,
        password: Password,
        sex: Sex,
      };
    }

  }, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex]);

  return (
    <div id = "body">
      <div className="register-box">
        <h2>회원가입</h2>
        <div className="input-area">
          <input 
            placeholder="이름"
            type="text"
            value={Name}
            onChange={onNameHandler}
          />
        </div>
        <div className="check-variable">
          {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
        </div>
        <div className="input-area">
          <input 
            placeholder="아이디"
            type="text"
            value={Id}
            onChange={onIdHandler}
          />
        </div>
        <div className="check-variable">
          {checkIdError && <div style={{color : 'red'}}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
        </div>
        <div className="input-area">
          <input 
            placeholder="비밀번호"
            type="text"
            value={Password}
            onChange={onPasswordHandler}
          />
        </div>
        <div className="check-variable">
          {checkPasswordError && <div style={{color : 'red'}}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
        </div>
        <div className="input-area">
          <input 
            placeholder="비밀번호 재입력"
            type="text"
            value={PasswordCheck}
            onChange={onPasswordCheckHandler}
          />
        </div>
        <div className="check-variable">
          {PasswordError && <div style={{color : 'red'}}>비밀번호가 일치하지 않습니다.</div>}
        </div>
        <div className="input-area">
          <input 
            type="radio" 
            value = "0"
            checked = {Sex === "0"}
            onChange={onSexHandler}
          />남
          <input 
            type="radio" 
            value = "1"
            checked = {Sex === "1"}
            onChange={onSexHandler}
          />여
        </div>
        <div className="btn-area" onClick={onSubmitHandler}>
          <button 
            className="register-btn"
          >
            가입하기
          </button>
        </div>
        <div className="check-variable">
          {checkRegisterError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
        </div>
      </div>
    </div>
  );

}

export default RegisterPage;