import {
  selectDepartureFlight,
  selectIsFetchingProductOptions,
  selectIsOnRequest,
  selectPackageRooms,
  selectReturnFlight,
} from "../booking/selectors";
import { getDateText, getTravelersText } from "./sidebar-util";
import { selectFormRooms } from "../travelers-form/travelers-form-slice";
import {
  selectBasePrice,
  selectDeposit,
  selectIsFetchingPriceDetails,
  selectSeparateExtraPriceDetails,
  selectSeparatePackagePriceDetails,
  selectTotalPrice,
} from "../price-details/price-details-slice";
import { useSelector } from "react-redux";

import React from "react";
import SettingsContext from "../../settings-context";
import Sidebar from "./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 } =
    useContext(SettingsContext);
  const bookingAttributes = useSelector(selectBookingAttributes);
  const rooms = useSelector(selectFormRooms);
  const travelerRooms = getTravelersText(rooms);
  const departureFlight = useSelector(selectDepartureFlight);
  const returnFlight = useSelector(selectReturnFlight);
  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
  const accommodations = useSelector(selectPackageRooms);

  const isLoading = isFetchingProductOptions || isFetchingPriceDetails;

  return (
    <Sidebar
      productName={productName}
      thumbnailUrl={thumbnailUrl}
      isLoading={isLoading}
      startDateText={getDateText(bookingAttributes?.startDate)}
      endDateText={
        bookingAttributes?.startDate !== bookingAttributes?.endDate
          ? getDateText(bookingAttributes?.endDate)
          : undefined
      }
      travelerRooms={travelerRooms}
      departureFlight={departureFlight}
      returnFlight={returnFlight}
      basePrice={useSelector(selectBasePrice)}
      totalPrice={useSelector(selectTotalPrice)}
      includedCosts={useSelector(selectSeparatePackagePriceDetails)}
      extraCosts={useSelector(selectSeparateExtraPriceDetails)}
      accommodations={accommodations}
      deposit={useSelector(selectDeposit)}
      isOnRequest={useSelector(selectIsOnRequest)}
      headerComponent={sidebarHeaderComponent ?? undefined}
      footerComponent={sidebarFooterComponent ?? undefined}
      loaderComponent={loaderComponent ?? undefined}
    />
  );
};

export default SidebarContainer;