import React from 'react';
import { SeatLayout } from './SeatLayout';
import { action } from '@storybook/addon-actions';

const reservedSeatsSample = ['A1', 'B2', 'C3'];
const currentUserReservedSeats = ['A3', 'B4'];
const logSelectionChange = action('Clicked/Unclicked');

export default {
  title: 'Toplevel/SeatLayout',
  component: SeatLayout,
  parameters: {
    backgrounds: {
      default: 'blue-bg',
      values: [{ name: 'blue-bg', value: '#3444c5' }],
    },
    layout: 'centered',
  },
  argTypes: {
    selectedSeats: {
      control: { type: 'array' },
      description: 'Seats currently selected by the user',
    },
    reservedSeats: {
      control: { type: 'array' },
      description: 'Seats reserved by others',
    },
    currentReservedSeats: {
      control: { type: 'array' },
      description: 'Seats reserved by the logged-in user',
    },
    // limit is used internally, not exposed in the controls
  },
};

const modeConfig = {
  available: {
    selectedSeats: [],
    reservedSeats: [],
    currentReservedSeats: [],
    limit: 3,
  },
  reserved: {
    selectedSeats: [],
    reservedSeats: reservedSeatsSample,
    currentReservedSeats: [],
    limit: 2,
  },
  selected: {
    selectedSeats: [],
    reservedSeats: [],
    currentReservedSeats: currentUserReservedSeats,
    limit: 1,
  },
};

export const Default = (args) => {
  const config = modeConfig[args.mode] || modeConfig.available;

  return (
    <SeatLayout
      selectedSeats={args.selectedSeats.length ? args.selectedSeats : config.selectedSeats}
      reservedSeats={args.reservedSeats.length ? args.reservedSeats : config.reservedSeats}
      currentReservedSeats={
        args.currentReservedSeats.length
          ? args.currentReservedSeats
          : config.currentReservedSeats
      }
      limit={config.limit}
      onSelectionChange={logSelectionChange}
    />
  );
};

Default.args = {
  mode: 'available',
  selectedSeats: [],
  reservedSeats: [],
  currentReservedSeats: [],
};
