import Header from "../components/Header";

const InvitePage = () => {
  const usercheck = localStorage.getItem("user");

  function goInvitedroom() {
    let check1= null;
    let check2= null;
    if (usercheck)
      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;