import { useEffect, useState } from "react";
import SeatLayout from "../components/top-level/seat-layout";
import { useAppContext } from "../_context";
import { useLocation, useNavigate } from "react-router-dom";

export function _Seatlayout() {
  let { userseats, isLoading, seats, AddOrUpdateSeats, GetAllSeats, GetSeats } =
    useAppContext();

  const [reservedSeat, setReservedSeat] = useState([]);
  const [selectedSeat, setSelectedSeat] = useState([]);
  const navigate = useNavigate();
  const userId = sessionStorage.getItem("userId");
  const seatLimit = sessionStorage.getItem("seatLimit");
  const location = useLocation();
  useEffect(() => {
    GetSeats();

    if (!location?.state?.seats.length) {
      GetAllSeats();
    }
    const handleBeforeUnload = (event) => {
      // Check if the page is about to unload or refresh
      if (event.type === "beforeunload") {
        navigate("/booking", { replace: true });
      }
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, []);
  // useEffect(() => {
  //   GetSeats();
  //   const handleBeforeUnload = (event) => {
  //     // Check if the page is about to unload or refresh
  //     if (event.type === "beforeunload") {
  //       sessionStorage.setItem("pageload", true);
  //     }
  //   };
  //   window.addEventListener("beforeunload", handleBeforeUnload);
  //   return () => {
  //     window.removeEventListener("beforeunload", handleBeforeUnload);
  //   };
  // }, []);
  // useEffect(() => {
  //   const reloadPage = sessionStorage.getItem("pageload");
  //   reloadPage && GetAllSeats();
  // }, []);
  useEffect(() => {
    handleReservedSeats();
  }, [userseats]);

  const handleReservedSeats = async () => {
    let seatArray = [];
    const selectedSeats = await userseats?.find((e) => e.id == userId);
    const results = selectedSeats?.seats;
    setSelectedSeat(results);
    const reservedSeats = userseats?.filter((e) => e.id != userId);
    reservedSeats?.forEach((element) => {
      element?.seats.forEach((e) => {
        seatArray = [...seatArray, e];
        setReservedSeat(seatArray);
      });
    });
  };

  const handleConfirmed = async ({ id, seats }) => {
    await AddOrUpdateSeats({ id, seats });
    navigate("/confirmation", { state: { seats: seats } });
  };

  return (
    <SeatLayout
      isLoading={isLoading}
      userId={userId}
      seatLimit={seatLimit}
      seats={seats}
      selectedSeats={selectedSeat}
      reservedSeats={reservedSeat}
      onClick={handleConfirmed}
    />
  );
}