import React, { useState } from "react";
import { useQuery, useMutation } from "@apollo/react-hooks";
import { withRouter } from "react-router-dom";
import RoomPresenter from "./RoomPresenter";
import { GET_ROOMS, CREATE_ROOM } from "./RoomQueries";
import useInput from "../../Hooks/useInput";
import { toast } from "react-toastify";

export default withRouter(() => {
  const [action, setAction] = useState("showList");

  const roomName = useInput("");

  const { data } = useQuery(GET_ROOMS);
  const [createRoom] = useMutation(CREATE_ROOM);

  let roomArray, newRoomObj;
  if (data !== undefined) {
    const { getRooms } = data;
    roomArray = getRooms;
  }

  const onSubmit = async (e) => {
    e.preventDefault();
    if (roomName.value !== "") {
      try {
        newRoomObj = await createRoom({ variables: { name: roomName.value } });
        if (!newRoomObj) {
          // when fail to create room
          toast.error("fail to create new room");
        } else {
          // when success to make room
          toast.success("success to make new room !");
          setAction("showList");
        }
      } catch {
        toast.error("occur unexpected error");
      }
    } else {
      toast.error("room name is required !");
    }
  };

  return (
    <RoomPresenter
      roomArray={roomArray}
      action={action}
      setAction={setAction}
      onSubmit={onSubmit}
      roomName={roomName}
    />
  );
});