import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import localforage from "localforage";

import "../styles/Login.css";
import axios from "axios";
import cryptoJs from "crypto-js";

const Login = () => {
  // console.log("visit Login");
  const [state, setState] = useState({
    id: "",
    pw: "",
    btn: "Login",
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const navigate = useNavigate();
  const login = async () => {
    setState({ ...state, btn: "Login..." });
    const { data: userDBID } = await axios.get(
      "http://3.34.173.161:3001/db/users",
      { params: { loginID: state.id } }
    );
    if (userDBID) {
      //pass crawling, just ical
      const { data: peed } = await axios.get(
        "http://3.34.173.161:3001/db/users/ical",
        { params: { ID: userDBID } }
      );
      await axios.put("http://3.34.173.161:3001/db/ical", {
        userID: userDBID,
        peed: peed.ical,
      });

      const hashpw = cryptoJs.SHA256(state.pw).toString();
      const { data: isCorrectPW } = await axios.get(
        "http://3.34.173.161:3001/db/users/check",
        {
          params: { loginID: state.id, loginPW: hashpw },
        }
      );
      if (isCorrectPW) await localforage.setItem("userID", Number(userDBID));
      else {
        setState({ ...state, btn: "Login" });
        alert(
          "등록된 ID/PW와 다릅니다\n(비밀번호가 변경되었다면 관리자에게 문의하세요)"
        );
        return;
      }
    } else {
      //crawling
      const { data: loginResult } = await axios.post(
        "http://3.34.173.161:3001/login/",
        {
          id: state.id,
          pw: state.pw,
        }
      );
      if (loginResult === "failed") {
        setState({ ...state, btn: "Login" });
        alert(
          "ID/PW를 확인해주세요\n(크롤링 오류일 수 있습니다. 다시 시도해주세요)"
        );
        return;
      } else if (loginResult === "error") {
        setState({ ...state, btn: "Login" });
        alert("다시 시도해 주세요");
        return;
      }
      await localforage.setItem("userID", loginResult.userID);
    }
    await localforage.setItem("id", state.id);
    await localforage.setItem("pw", state.pw);
    await localforage.setItem("session", true);
    navigate("/");
  };

  useEffect(() => {
    async function ifAlreadyLogined() {
      if (await localforage.getItem("session")) navigate("/");
    }
    ifAlreadyLogined();
  }, [navigate]);

  return (
    <div className="Login">
      <div className="idpw">
        <input
          className="id"
          name="id"
          value={state.id}
          onChange={handleChangeState}
          onFocus={(e) => e.target.select()}
          placeholder="E-Campus ID"
        />
        <input
          className="pw"
          name="pw"
          value={state.pw}
          onChange={handleChangeState}
          onFocus={(e) => e.target.select()}
          placeholder="E-Campus Password"
          type="password"
        />
      </div>
      <button onClick={login}>{state.btn}</button>
    </div>
  );
};

export default Login;