import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";

const INIT_ROOM = {
    name: "",
  };

const INIT_CHANNEL = {
    channelName: "",
    joinName: [],
};
const RightHamburger = () => {
    const [channel, setChannel] = useState([INIT_CHANNEL]);
    const [room, setRoom] = useState([INIT_ROOM])
    const { roomId } = useParams();
    const [error, setError] = useState("");
    const id = localStorage.getItem('user');

    async function getRoom(roomId) {
        try {
          const data = await RoomApi.getRoom([roomId]);
          setRoom({...room, name:data[0].name});
        } catch (error) {
          catchErrors(error, setError);
        }
      }

    async function exitRoom() {
        console.log('id, roomid정보', id, roomId)
        try {
            const data = await RoomApi.exitRoom({ id, roomId })
            console.log(data)
        } catch (error) {
            catchErrors(error, setError);
        }


    }

    async function getChannel(roomId) {
        const ID = roomId
        try {
            const data = await RoomApi.getRoom([ID]);
            const Channel = data[0].channel
            console.log('방데이터:', Channel)
            const channelList = [];
            for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
                for (const key in Channel[prop]) {
                    console.log(key)
                    console.log(prop)
                    console.log(Channel[prop][key])
                    channelList.push({
                        channelName: key,
                        joinName: Channel[prop][key]
                    });
                }
            }
            setChannel(channelList);
        } catch (error) {
            catchErrors(error, setError);
        }
    }
  
  // console.log(channel)

  useEffect(() => {
    getChannel(roomId);
    getRoom(roomId)
  }, [roomId]);

  function roomIdCopy() {
    const t = document.querySelector("#roomId").innerText;
    console.log(t);
    navigator.clipboard.writeText(t);
    document.execCommand("copy");
  }
  return (
    <div>
      <div>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#right-hamburger"
          aria-controls="right-hamburger"
          aria-expanded="false"
          aria-label="Toggle navigation"
          style={{ border: "#f4c1f2" }}
        >
          <img src="/RightHamburgerImg.png" width="50px" height="30px" />
        </button>
      </div>
      <div
        className="offcanvas offcanvas-end"
        style={{ width: "330px" }}
        tabIndex="-1"
        id="right-hamburger"
        aria-labelledby="hamburgerLabel"
      >
        <div className="offcanvas-header">
          <p
            className="col-6 offcanvas-title"
            id="offcanvasExampleLabel"
            style={{
              fontWeight: "bold",
              fontSize: "15px",
              overflow: "hidden",
              whiteSpace: "nowrap",
              width: "150px",
              color: "#000000",
            }}
          >
            {room.name}
          </p>
          <h6 className="mt-2" id="roomId">
            {" "}
            {`${roomId}`}{" "}
          </h6>
          <button
            type="button"
            className="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div>
                <ChannelSingle channel={channel} />
                <div className="d-flex flex-row-reverse">
                        <button
                            type="button"
                            className="m-3 rounded"
                            data-bs-toggle="modal"
                            data-bs-target="#inviteRoom"
                            style={{
                                height: "30px",
                                fontWeight: "bold",
                                backgroundColor: "#E0CEE8",
                                color: "black",
                                border: "1px #D64D61",
                            }}
                        >
                            초대
                        </button>
                        <div
                            className="modal fade"
                            id="inviteRoom"
                            tabIndex="-1"
                            aria-labelledby="exitRoomLabel"
                            aria-hidden="true"
                        >
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button
                                            type="button"
                                            className="btn-close"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"
                                        ></button>
                                    </div>
                                    <div className="modal-body d-flex justify-content-center">
                                        어떤 방식으로 초대하시겠습니까?
                                    </div>
                                    <div className="row mb-3">
                                        <div className="d-flex justify-content-evenly">
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
                                                style={{ width: "120px" }}
                                            >
                                                카카오로 초대
                                            </button>
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
                                                data-bs-dismiss="modal"
                                                style={{ width: "120px" }}
                                                onClick={roomIdCopy}
                                            >
                                                방 Id 복사
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div className="d-flex flex-row-reverse">
                        <button
                            type="button"
                            className="m-3 rounded text-white"
                            data-bs-toggle="modal"
                            data-bs-target="#exitRoom"
                            style={{
                                height: "30px",
                                fontWeight: "bold",
                                backgroundColor: "#d86da6",
                                color: "black",
                                border: "1px #d86da6",
                            }}
                        >
                            퇴장
                        </button>
                        {/* {admin ? (
              <button
                type="button"
                className="m-3 rounded"
                style={{
                  height: "30px",
                  fontWeight: "bold",
                  backgroundColor: "#E0CEE8",
                  color: "black",
                  border: "1px #D64D61",
                }}
              >
                설정
              </button>
            ) : null} */}

                        <div
                            className="modal fade"
                            id="exitRoom"
                            tabIndex="-1"
                            aria-labelledby="exitRoomLabel"
                            aria-hidden="true"
                        >
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button
                                            type="button"
                                            className="btn-close"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"
                                        ></button>
                                    </div>
                                    <div className="modal-body d-flex justify-content-center">
                                        이방에서 퇴장하시겠습니까?
                                    </div>
                                    <div className="row mb-3">
                                        <div className="d-flex justify-content-evenly">
                                            <Link to={`/user/${id}`} className="col-2 p-1 btn btn-primary">
                                            <button
                                                type="button"
                                                onClick={exitRoom}
                                                className="btn btn-primary"
                                                data-bs-dismiss="modal"
                                            >
                                                예
                                            </button>
                                            </Link>
                                            <button
                                                type="submit"
                                                className="btn btn-primary"
                                                data-bs-dismiss="modal"
                                            >
                                                아니요
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
                        };

export default RightHamburger;