import { SeatLayout } from "./SeatLayout";

export default {
  title: 'Toplevel/SeatLayout',
  component: SeatLayout,
    parameters:{
   backgrounds: {
      default: 'blue-bg',
      values: [
        { name: 'blue-bg', value: '#3444c5' }, // blue background
      ],
    },
    layout:"centered"
  },
  argTypes: {
    seatType: {
      control: {
        type: 'radio',
      },
      options: ['available', 'reserved', 'selected']
    },
    limit: {
      control: { type: 'number', min: 1, max: 10 },
    },
    onSubmit: { action: 'clicked/unclicked' },
    onSelectionChange: { action: 'selectedseats' },
  },
};

export const Default= ({ seatType, limit, onSubmit, onSelectionChange }) => {
  let allReservedSeats = [];
  let initialReservedSeats = [];

  if (seatType === 'reserved') {
    allReservedSeats = ['B1', 'B2', 'B3'];
  } else if (seatType === 'selected') {
    initialReservedSeats = ['C1', 'C2','C3'];
  }
  return (
    <SeatLayout
      key={seatType} 
      allReservedSeats={allReservedSeats}
      initialReservedSeats={initialReservedSeats}
      limit={limit}
      onSubmit={onSubmit}
      onSelectionChange={onSelectionChange}
    />
  );
};

Default.args = {
      seats: [
      [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],
    ],
  seatType: 'available',
  limit: 3,
};
