import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { login } from "../libs/E_Campus";

import "../styles/Debug.css";
import { initTempSubjects } from "../utils/Test";

const Debug = () => {
  const [state, setState] = useState({
    type: "login",
    input1: "",
    input2: "",
    output: "",
  });

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

  const handleSubmit = async (e) => {
    let result;
    switch (state.type) {
      case "initSubjects":
        await initTempSubjects();
        result = "inited";
        break;
      case "login":
        result = login(state.input1, state.input2);
        break;
      default:
    }
    console.log(result);
    setState({ ...state, output: result });
  };

  const navigate = useNavigate();

  return (
    <div className="Debug">
      <div>
        <button
          onClick={() => {
            navigate("/home");
          }}
        >
          Home
        </button>
      </div>
      <div className="dd">
        <div>
          <span>type : </span>
          <select name="type" value={state.type} onChange={handleChangeState}>
            <option value={"initSubjects"}>initSubjects</option>
            <option value={"login"}>login</option>
          </select>
        </div>

        <input
          value={state.input1}
          onChange={handleChangeState}
          name="input1"
        />
        <input
          value={state.input2}
          onChange={handleChangeState}
          name="input2"
        />
        <button onClick={handleSubmit}>Enter</button>
        <div>{"result : \n" + state.output}</div>
      </div>
    </div>
  );
};

export default Debug;