// import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import Button from "../../Base/button";
import styles from "./seat-layout.module.css";
import Seat from "../seat";
import Confirmation from "../confirmation";

function SeatLayout({
  userId = 1,
  seats,
  reservedSeats,
  selectedSeats,
  onClick,
  ...props
}) {
  const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
  const [confirmation, setConfirmation] = useState(false);
  const handleSeats = (seat) => {
    if (!selectedseat?.includes(seat)) {
      setSelectedSeat([...selectedseat, seat]);
    } else {
      setSelectedSeat(selectedseat?.filter((e) => e != seat));
    }
  };
  useEffect(() => {
    setSelectedSeat([...selectedSeats]);
  }, [selectedSeats]);
  const handleConfirm = (e) => {
    e.preventDefault();
    //check if already have data then update otherwise create,
    //write code
    onClick({ userId: parseInt(userId), seats: selectedseat });
    setTimeout(() => {
      setConfirmation(true);
    }, 500);
  };

  return (
    <>
      {!confirmation ? (
        <div className={styles.container}>
          <h1>Choose Seats</h1>
          <div className={styles.curve}>
            <div className={styles["curve-shadow"]}></div>
          </div>
          <div className={styles["seat-container"]}>
            {seats?.map((seat) => (
              <div className={styles.seat}>
                {seat?.map((e, i) => (
                  <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
                    <Seat
                      key={e}
                      seatNo={e}
                      onChange={() => handleSeats(e)}
                      status={
                        selectedseat?.includes(e)
                          ? "selected"
                          : reservedSeats?.includes(e)
                          ? "reserved"
                          : "available"
                      }
                    />
                  </div>
                ))}
              </div>
            ))}
          </div>
          <Button onClick={handleConfirm} {...props}>
            Confirm
          </Button>
          <div className={styles["seat-status"]}>
            <div className={styles.selected}>
              <div></div>
              <p>Selected</p>
            </div>
            <div className={styles.reserved}>
              <div></div>
              <p>Reserved</p>
            </div>
            <div className={styles.available}>
              <div></div>
              <p>Available</p>
            </div>
          </div>
        </div>
      ) : (
        <Confirmation ticketCount={selectedseat.length} seats={selectedseat} />
      )}
    </>
  );
}
SeatLayout.defaultProps = {
  seats: [],
  reservedSeats: [],
  selectedSeats: [],
};
export default SeatLayout;