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

export function _Seatlayout({ ...props }) {
  const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
  const [reservedSeat, setReservedSeat] = useState([]);
  const [selectedSeat, setSelectedSeat] = useState([]);
  const { id } = useParams();
  const [seat] = useState([
    [0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
    ["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
    ["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
    ["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
    ["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
    ["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
    ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
    [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
  ]);

  useLayoutEffect(() => {
    GetAllReservedSeats();
  }, []);
  useEffect(() => {
    handleReservedSeats();
  }, [userseats]);

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

  return (
    <SeatLayout
      userId={id}
      seats={seat}
      selectedSeats={selectedSeat}
      reservedSeats={reservedSeat}
      onClick={AddOrUpdateSeats}
      {...props}
    />
  );
}