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;