import {
  AirlineBookingPackageOption,
  AirportBookingPackageOption,
  BookingAirlineGroup,
  BookingAirportGroup,
  BookingOptionGroup,
  PerBookingPackageOption
} from '@qite/tide-client/build/types';
import OptionBookingGroup from './option-booking-group';
import React from 'react';

interface OptionBookingAirlineGroupProps {
  airGroup: BookingAirlineGroup<AirlineBookingPackageOption>;
  onGroupChange?: (group: BookingAirlineGroup<AirlineBookingPackageOption> | BookingAirportGroup<AirportBookingPackageOption>) => void;
}

const OptionBookingAirlineGroup: React.FC<OptionBookingAirlineGroupProps> = ({ airGroup, onGroupChange }) => {
  const handleOnGroupChange = (group: BookingOptionGroup<PerBookingPackageOption>) => {
    const updatedGroups = airGroup.groups?.map((g) => (g.name === group.name ? group : g));

    const updatedAirlineGroup = Object.assign({}, airGroup, {
      groups: updatedGroups
    });
    if (onGroupChange) onGroupChange(updatedAirlineGroup);
  };

  const groups = airGroup.groups.map(
    (group) =>
      ({
        name: group.name,
        title: group.title,
        options: group.options
      } as BookingOptionGroup<PerBookingPackageOption>)
  );

  return (
    <div className="booking-card__airline-group-body">
      <h4 className="booking-card__airline-group-heading">{airGroup.label}</h4>
      {groups.map((group, i) => (
        <OptionBookingGroup
          key={`${airGroup.label}_${group.name}_${i}`}
          group={group}
          firstClassName={'booking-card__group-body'}
          secondClassName={'booking-card__group-heading'}
          parentId={`booking_${airGroup.label}_${group.name}`}
          onGroupChange={handleOnGroupChange}
        />
      ))}
    </div>
  );
};

export default OptionBookingAirlineGroup;