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

import "../styles/Debug.css";

const Debug = () => {
  console.log("visit 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 "login":
        //result = login(state.input1, state.input2);
        break;
      case "server":
        setState({ ...state, output: "loading..." });
        axios
          .post("http://localhost:3001/login/", {
            id: state.input1,
            pw: state.input2,
          })
          .then((res) => {
            setState({ ...state, output: res.data });
          });
        return;
      default:
    }
    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={"login"}>login</option>
            <option value={"server"}>server</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;