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://localhost:3001/db/users",
      {
        params: {
          loginID: state.id,
        },
      }
    );

    if (userDBID) {
      //pass crawling
      const hashpw = cryptoJs.SHA256(state.pw).toString();
      const { data: isCorrectPW } = await axios.get(
        "http://localhost: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를 확인해주세요");
        return;
      }
    } else {
      //crawling
      const { data: loginResult } = await axios.post(
        "http://localhost:3001/login/",
        {
          id: state.id,
          pw: state.pw,
        }
      );
      if (loginResult === "login failed") {
        setState({ ...state, btn: "Login" });
        alert("ID/PW를 확인해주세요");
        return;
      }
      // + else (성공시) localforage에 userID추가
    }
    // + localforage에 id pw 추가
    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;