import Header from "../components/Header";
import { useState, useEffect } from "react";
import { useParams } from "react-router";
import roomApi from "../apis/room.api";
import userApi from "../apis/user.api";
import catchErrors from "../context/catchError";

const INIT_PROFILE = {
  id: "",
  roomNumber: ""
};

// userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
const InvitePage = () => {
  const [profile, setProfile] = useState([INIT_PROFILE]);
  const [success, setSuccess] = useState(false);
  const [error,setError]=useState("");
  const usercheck = localStorage.getItem("user");
  const {roomId} = useParams();

  async function getProfile(userID) {
    try {
      const data = await userApi.getUser(userID);
      setProfile(data);
    } catch (error) {
      catchErrors(error, setError);
    }
  }

  async function joinroom(userId,roomId) {
    try {
        // setLoading(true);
        setError("");
        const data = await roomApi.join({ userId: userId, roomId: roomId });
        console.log('서버연결됬나요', data)
        setSuccess(true);
    } catch (error) {
        catchErrors(error, setError);
    } finally {
        // setLoading(false);
    }
}
  useEffect(() => {
    getProfile(usercheck);
  }, []);

  function goInvitedroom() {
    let check1= null;
    let check2= null;
    console.log(usercheck);
    if (usercheck)
      joinroom(usercheck,roomId);
      if(success)
        check1 = window.confirm("방 참여가 완료되었습니다.")
        if(check1)
        window.location.href=`/user/${usercheck}`
    else 
      check2 = window.confirm("로그인이 필요합니다.")
      if(check2)
        window.location.href="/"
  }

  function invitereject() {
    if(usercheck)
    window.location.href=`/user/${usercheck}`
    else
    window.location.href="/"
  }

  return (
    <div>
      {/*페이지 전체*/}
      <Header />
      <div className="d-flex justify-content-evenly">
        {/* 위 사진,이름 */}
        <div
          // style={{
          //   width: "100%",
          //   height: "140px",
          //   textAlign: "center",
          //   border: "3px",
          //   borderStyle: "none solid solid",
          //   borderColor: "red",
          //   fontSize: "12px",
          // }}
        >
          {/* 방 부분
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
          <img style={{ width: "90px", height: "90px" }}></img>
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
            방 id: ${roomid}
          </p> */}
        </div>
      </div>

      <div
        // style={{
        //   width: "80%",
        //   height: "200px",
        //   textAlign: "center",
        //   fontSize: "18px",
        //   marginLeft: "10%",
        //   marginRight: "10%",
        // }}
      >
        {/* 아래 텍스트 */}
        <p align= "center" style={{
          fontSize: "30px",
          marginTop: "120px",
          marginBottom: "80px"
        }}>
          축하합니다! 친구가 당신을
          <br/>
          화상회의에 초대했습니다.
          <br/>
          <br/>
          <b>초대를 수락하시겠습니까?</b>
        </p>
      </div>

      <div className="d-flex justify-content-evenly">
        {/* 수락, 거절 버튼 */}
        <button
          type="submit"
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
          onClick={goInvitedroom}
          
        >
          수락
        </button>
        <button
          type="submit"
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
          onClick={invitereject}
        >
          거절
        </button>
      </div>
    </div>
  );
};

export default InvitePage;