import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { login } from "../../../modules/user";
import { address } from "../../../modules/weather";
import "../style/LoginPage.scss"

function LoginPage(props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const loginResult = useSelector((state) => state.user.loginData);

  const [Id, setId] = useState("");
  const [Password, setPassword] = useState("");

  const [checkLogin, setCheckLogin] = useState(false);
  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}$/;

  useEffect(() => {
    if (checkLogin === true) {
      loginResult.then((result) => {
        if (result.loginSuccess === true) {
          alert('로그인에 성공하였습니다.');
          navigate('/main');
        } 
        else {
         alert('로그인에 실패하였습니다.');
        }
      })
    }
  }, [loginResult])

  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
    if (!checkLoginError) {
      const UserData = {
        id: Id,
        password: Password
      };

      dispatch(login(UserData));
      dispatch(address());
      setCheckLogin(true);

    }

  }, [checkIdError, checkPasswordError, Password, dispatch, loginResult]);

  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;