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

function LoginPage(props) {
  
  const [Id, setId] = useState("");
  const [Password, setPassword] = useState("");

  const [checkIdError, setCheckIdError] = useState(false);
  const [checkPasswordError, setCheckPasswordError] = useState(false);
  const [checkLoginError, setCheckLoginError] = 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 onPasswordHandler = useCallback((event) => {
    setPassword(event.currentTarget.value);

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

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

    if (checkIdError || Id === "") {
      setCheckLoginError(true);
    }
    else if (checkPasswordError || Password === "") {
      setCheckLoginError(true);
    }
    else {
      setCheckLoginError(false);
    }

    // login data
    if (!checkLoginError) {
      const UserData = {
        id: Id,
        password: Password,
      };
    }

  }, [checkIdError, checkPasswordError, Password]);

  return (
    <div id = "body">
      <div className="login-box">
        <h2>로그인</h2>
        <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="btn-area" onClick={onSubmitHandler}>
          <button 
            className="login-btn"
          >
            로그인
          </button>
        </div>
        <div className="check-variable">
          {checkLoginError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
        </div>
      </div>
    </div>
  );

}

export default LoginPage;