/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";

import { usePayment } from "@/features/modules/payment/hooks/use-payment";
import type { FlightDetailRequest as FlightDetailRequestType } from "@/services/eva-display/flight/flight-detail/flight-detail.service";
import { useFlightDetailQuery } from "@/services/eva-display/flight/flight-detail/flight-detail.service";

import FlightSummarySkeleton from "./components/flight-summary-skeleton";
import { useFlighSummaryCtx } from "./context/flight-summary-context";
import FlightSummaryData from "./flight-summary-data";

const FlightSummaryDetail = () => {
  const { pricingCombinationKeys, searchId, combinationGroupKeys } =
    useFlighSummaryCtx();
  const { clearPaymentState } = usePayment();

  useEffect(() => {
    clearPaymentState();
  }, []);

  const flightDetailRequest: FlightDetailRequestType =
    combinationGroupKeys?.length > 1
      ? {
          ProductKey: "",
          searchId,
          CombinationGroupKeys: combinationGroupKeys,
        }
      : {
          ProductKey: pricingCombinationKeys[0]!,
          searchId,
        };

  const flightDetailQuery = useFlightDetailQuery({
    FlightDetailRequest: flightDetailRequest,
  });

  if (flightDetailQuery.isLoading && !flightDetailQuery.data)
    return <FlightSummarySkeleton />;

  return (
    <div>
      <FlightSummaryData detailData={flightDetailQuery.data!} />
    </div>
  );
};

export default FlightSummaryDetail;