import {
  selectAgentAdressId,
  selectDepartureFlight,
  selectIncludedServiceTypes,
  selectIsFetchingProductOptions,
  selectIsOnRequest,
  selectIsUnavailable,
  selectPackageRooms,
  selectReturnFlight,
  selectRoomOptionDepartureFlightsMetaData,
  selectRoomOptionReturnFlightsMetaData,
  selectTranslations
} from '../booking/selectors';
import { getDateText, getTravelersText } from './sidebar-util';
import { selectFormRooms } from '../travelers-form/travelers-form-slice';
import {
  selectBasePrice,
  selectBasePricePerPaxType,
  selectCommission,
  selectDeposit,
  selectIsFetchingPriceDetails,
  selectSeparateExtraPriceDetails,
  selectSeparateExtraPriceDetailsPerPaxType,
  selectSeparatePackagePriceDetails,
  selectTotalPrice
} from '../price-details/selectors';
import { useSelector } from 'react-redux';

import React from 'react';
import SettingsContext from '../../settings-context';
import SharedSidebar from '../../../shared/booking/shared-sidebar';
import { selectBookingAttributes } from '../booking/selectors';
import { useContext } from 'react';

interface SidebarProps {
  productName: string;
  thumbnailUrl?: string;
}

const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl }) => {
  const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType } = useContext(SettingsContext);
  const bookingAttributes = useSelector(selectBookingAttributes);
  const rooms = useSelector(selectFormRooms);
  const translations = useSelector(selectTranslations);
  const travelerRooms = getTravelersText(rooms, translations);
  const departureFlight = useSelector(selectDepartureFlight);
  const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
  const returnFlight = useSelector(selectReturnFlight);
  const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
  const accommodations = useSelector(selectPackageRooms);
  const includedServiceTypes = useSelector(selectIncludedServiceTypes);
  const isUnavailable = useSelector(selectIsUnavailable) || false;
  const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
  const agent = useSelector(selectAgentAdressId);

  return (
    <SharedSidebar
      productName={productName}
      thumbnailUrl={thumbnailUrl}
      isLoading={isLoading}
      startDateText={getDateText(bookingAttributes?.startDate)}
      endDateText={bookingAttributes?.startDate !== bookingAttributes?.endDate ? getDateText(bookingAttributes?.endDate) : undefined}
      travelerRooms={travelerRooms}
      departureFlightMetaData={departureFlightMetaData}
      returnFlightMetaData={returnFlightMetaData}
      basePrice={useSelector(selectBasePrice)}
      commission={useSelector(selectCommission)}
      totalPrice={useSelector(selectTotalPrice)}
      includedCosts={useSelector(selectSeparatePackagePriceDetails)}
      extraCosts={useSelector(selectSeparateExtraPriceDetails)}
      accommodations={accommodations}
      includedServiceTypes={includedServiceTypes}
      deposit={useSelector(selectDeposit)}
      isOnRequest={useSelector(selectIsOnRequest)}
      headerComponent={sidebarHeaderComponent ?? undefined}
      footerComponent={sidebarFooterComponent ?? undefined}
      loaderComponent={loaderComponent ?? undefined}
      isUnavailable={isUnavailable}
      basePricePerPaxType={showPricesPerPaxType ? useSelector(selectBasePricePerPaxType) : undefined}
      seperateExtraPricePerPaxType={showPricesPerPaxType ? useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined}
      translations={translations}
      agent={agent}
    />
  );
};

export default SidebarContainer;