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;