import { useState } from "react";

import Button from "../../Base/button";
import "./seatlayout.css";
import Seat from "../seat";

function SeatLayout({
  seats,
  reservedSeats,
  selectedSeats,
  onClick,
  ...props
}) {
  const [selectedseat, setSelectedSeat] = useState(selectedSeats);
  const handleSeats = (seat) => {
    console.log(seat);
    if (!selectedseat.includes(seat)) {
      console.log("enter");
      setSelectedSeat([...selectedseat, seat]);
    } else {
      console.log("out");
      setSelectedSeat(selectedseat.filter((e) => e != seat));
    }
  };
  console.log(selectedseat);
  const handleConfirm = (e) => {
    e.preventDefault();
    const result = { id: 1, seats: selectedseat };
    onClick(result);
  };

  return (
    <div className="container">
      <h1>Choose Seats</h1>
      <div className="curve">
        <div className="curve-shadow"></div>
      </div>

      {seats.map((seat) => (
        <div className="seat">
          {seat.map((e, i) => (
            <div className={`${e === 0 ? "remove-seats" : ""}`}>
              <Seat
                key={e}
                onChange={() => handleSeats(e)}
                status={
                  selectedseat.includes(e)
                    ? "selected"
                    : reservedSeats.includes(e)
                    ? "reserved"
                    : "available"
                }
              />
            </div>
          ))}
        </div>
      ))}

      <Button onClick={handleConfirm} {...props}>
        Confirm
      </Button>
      <div className="seat-status">
        <div className="selected">
          <div></div>
          <p>Selected</p>
        </div>
        <div className="reserved">
          <div></div>
          <p>Reserved</p>
        </div>
        <div className="available">
          <div></div>
          <p>Available</p>
        </div>
      </div>
    </div>
  );
}

export default SeatLayout;
