// 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://${process.env.REACT_APP_SERVER_IP}: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;