"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GuestSelectorCustom = exports.renderInlineRoomMiniEngineElement = void 0;
exports.default = InlineRoomMiniEngineElement;
const contexts_1 = require("../../contexts/index.js");
const hooks_1 = require("../../hooks/index.js");
const classnames_1 = __importDefault(require("classnames"));
const ErrorContext_1 = require("contexts/ErrorContext");
const NotificationContext_1 = require("contexts/NotificationContext");
const dayjs_1 = __importDefault(require("dayjs"));
const react_1 = __importStar(require("react"));
const react_dom_1 = require("react-dom");
const react_i18next_1 = require("react-i18next");
const react_router_dom_1 = require("react-router-dom");
const react_use_measure_1 = __importDefault(require("react-use-measure"));
const Translation_1 = require("translations/Translation");
const AutoAutoHeight_1 = __importDefault(require("../../animations/AutoAutoHeight"));
const BookingAPI_1 = __importDefault(require("../../api/BookingAPI"));
const BEButton_1 = __importDefault(require("../../components/generic/BEButton"));
const BookNowPayLaterInfoBlock_1 = require("../../components/generic/BookNowPayLaterInfoBlock");
const FloatingDatePicker_1 = __importDefault(require("../../components/generic/date/FloatingDatePicker"));
const Icon_1 = __importStar(require("../../components/generic/Icon/Icon"));
const LargeLoader_1 = __importDefault(require("../../components/generic/loader/LargeLoader"));
const NumberIncrement_1 = __importDefault(require("../../components/generic/NumberIncrement"));
const Overlay_1 = require("../../components/generic/Overlay/Overlay");
const PromoCodeInput_1 = __importDefault(require("../../components/generic/PromoCodeInput"));
const Select_1 = require("../../components/generic/Select/Select");
const Text_1 = __importStar(require("../../components/generic/Text"));
const Tooltip_1 = __importDefault(require("../../components/generic/Tooltip/Tooltip"));
const RatesNotFoundBlock_1 = __importDefault(require("../../components/steps/room/RatesNotFoundBlock"));
const RoomRates_1 = __importDefault(require("../../components/steps/room/roomDetails/roomRates/RoomRates"));
const RoomListSearchEvent_1 = require("../../events/actions/RoomListSearchEvent");
const useSignedInMember_1 = require("../../hooks/useSignedInMember");
const BasketRow_1 = __importStar(require("../../models/BasketRow"));
const StepConfirmation_1 = __importDefault(require("../../pages/steps/StepConfirmation/StepConfirmation"));
const FeaturedPromoFeature_1 = __importDefault(require("../../providers/feature/FeaturedPromoFeature"));
const RoomstayThemeEngine_1 = __importDefault(require("../../providers/RoomstayThemeEngine"));
const Color_1 = require("../../util/Color");
const DataLayer_1 = __importStar(require("../../util/DataLayer"));
const StringHelper_1 = __importDefault(require("../../util/StringHelper"));
const InlineRoomMiniEngine_module_scss_1 = __importDefault(require("./InlineRoomMiniEngine.module.scss"));
function InlineRoomMiniEngineElement(props) {
    var _a, _b, _c, _d, _e;
    const { layout = 'default', policy, priceDescription, showInfants = false, maxInfants } = props.engine.getConfig();
    const isCardLayout = layout === 'card';
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const { memberNumber } = (0, useSignedInMember_1.useSignedInMember)();
    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
    const row = basketContext.currentBasketRows[0];
    const [isLoading, setLoading] = (0, react_1.useState)(true);
    const [rooms, setRooms] = (0, react_1.useState)([]);
    const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_1.useState)(false);
    const [featuredRates, setFeaturedRates] = (0, react_1.useState)([]);
    const [standardRates, setStandardRates] = (0, react_1.useState)([]);
    const [promoCode, setPromoCode] = (0, react_1.useState)(row === null || row === void 0 ? void 0 : row.getPromoCode());
    const { t } = (0, react_i18next_1.useTranslation)();
    const [ref, bounds] = (0, react_use_measure_1.default)();
    const thisElement = react_1.default.useRef(null);
    const { raise } = (0, hooks_1.useEvent)();
    const promoCodeTooltip = (row === null || row === void 0 ? void 0 : row.getPromoCodeTooltip(t, Translation_1.Translation)) || '';
    const didInitialEagerFetchRef = (0, react_1.useRef)(false);
    (0, react_1.useEffect)(() => {
        if (!row) {
            basketContext.addBasketRow(new BasketRow_1.default());
            return;
        }
        // Filters availability results by the provided room code.
        row.setEnableRoomCodeFilter(true);
        row.setRoomCode(props.engine.getRoomCode());
    }, [row, props.engine]);
    (0, react_1.useEffect)(() => {
        if (!(row === null || row === void 0 ? void 0 : row.getStartDate()) || !(row === null || row === void 0 ? void 0 : row.getEndDate())) {
            return;
        }
        fetchAvailability();
    }, [
        (_a = row === null || row === void 0 ? void 0 : row.getStartDate()) === null || _a === void 0 ? void 0 : _a.format('YYYY-MM-DD'),
        (_b = row === null || row === void 0 ? void 0 : row.getEndDate()) === null || _b === void 0 ? void 0 : _b.format('YYYY-MM-DD'),
        row === null || row === void 0 ? void 0 : row.getAdults(),
        row === null || row === void 0 ? void 0 : row.getChildren(),
        row === null || row === void 0 ? void 0 : row.getPromoCode(),
        memberNumber,
        hotel === null || hotel === void 0 ? void 0 : hotel.hotelID,
        props.engine.getRoomCode(),
    ]);
    (0, react_1.useEffect)(() => {
        var _a, _b, _c, _d, _e, _f;
        if (!(rooms && rooms.length > 0))
            return;
        const room = rooms[0];
        let nonPromoRates = [];
        const toSetFeaturedRate = [];
        if (FeaturedPromoFeature_1.default.isActive()) {
            for (const currentRate of room.getRates()) {
                if (((_a = currentRate.promoCode) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = basketContext.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCode()) === null || _c === void 0 ? void 0 : _c.toLowerCase())) {
                    toSetFeaturedRate.unshift(currentRate);
                }
                else {
                    nonPromoRates.push(currentRate);
                }
            }
            if (toSetFeaturedRate.length > 0) {
                setFeaturedRates(toSetFeaturedRate);
            }
        }
        else {
            nonPromoRates = room.getRates();
        }
        try {
            const search = {
                checkInTime: (_d = row === null || row === void 0 ? void 0 : row.getStartDate()) === null || _d === void 0 ? void 0 : _d.format('YYYY-M-D'),
                checkOutTime: (_e = row === null || row === void 0 ? void 0 : row.getEndDate()) === null || _e === void 0 ? void 0 : _e.format('YYYY-M-D'),
                numAdults: row === null || row === void 0 ? void 0 : row.getAdults(),
                numChildren: row === null || row === void 0 ? void 0 : row.getChildren(),
                numRooms: 1,
                promoCode: promoCode,
                roomCode: props.engine.getRoomCode(),
            };
            if (showInfants) {
                search.numInfants = row === null || row === void 0 ? void 0 : row.getInfants();
            }
            const eventRooms = (_f = rooms === null || rooms === void 0 ? void 0 : rooms.map((room) => {
                var _a, _b;
                const { name, code } = room;
                const foundRoom = {
                    name: name,
                    code: code,
                    lowestPrice: room.getLowestPrice(),
                    highestPrice: room.getHighestPrice(),
                    currency: ccx.currentCurrency,
                    rates: (_b = (_a = room.getRates()) === null || _a === void 0 ? void 0 : _a.map((rate) => {
                        const { name, code } = rate;
                        return {
                            name,
                            code,
                            price: {
                                averagePrice: rate.getAveragePrice(),
                                totalPrice: rate.getTotalPrice(),
                                currency: ccx.currentCurrency,
                            },
                        };
                    })) !== null && _b !== void 0 ? _b : [],
                };
                return foundRoom;
            })) !== null && _f !== void 0 ? _f : [];
            const event = new RoomListSearchEvent_1.RoomListSearchEvent(search, eventRooms);
            raise(event);
        }
        catch (ex) {
            console.warn(ex);
        }
        setStandardRates(nonPromoRates);
    }, [rooms]);
    (0, react_1.useEffect)(() => {
        if (hotel === null || hotel === void 0 ? void 0 : hotel.colors) {
            // Do this manually as Guide Step manages this for Fullpage.
            RoomstayThemeEngine_1.default.changeTheme(hotel.colors);
        }
    }, [hotel, hotel === null || hotel === void 0 ? void 0 : hotel.colors]);
    const updatePeopleValues = ({ adults, children, infants }) => {
        if (adults && adults !== row.getAdults()) {
            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
            row.setAdults(adults);
        }
        if ((children || children === 0) && children !== row.getChildren()) {
            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
            row.setChildren(children);
        }
        if ((infants || infants === 0) && infants !== row.getInfants()) {
            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
            row.setInfants(infants);
        }
        basketContext.updateBasketRow(row);
    };
    const updateDateValues = (startDate, endDate) => {
        if (startDate && endDate) {
            row.setStartDate(startDate);
            row.setEndDate(endDate);
            basketContext.updateBasketRow(row, false);
        }
    };
    if (!(row === null || row === void 0 ? void 0 : row.getArrivalDate()) && !(row === null || row === void 0 ? void 0 : row.getDepartureDate())) {
        row === null || row === void 0 ? void 0 : row.setStartDate((0, dayjs_1.default)().add(7, 'day'));
        row === null || row === void 0 ? void 0 : row.setEndDate((0, dayjs_1.default)().add(8, 'day'));
    }
    const isCompact = bounds.width < 1000 ? '--compact' : '';
    const fetchAvailability = () => __awaiter(this, void 0, void 0, function* () {
        // Only eager search on the initial load
        const eager = !didInitialEagerFetchRef.current;
        didInitialEagerFetchRef.current = true;
        try {
            setLoading(true);
            const allRooms = yield BookingAPI_1.default.Availability.fetchAvailabilityData(row, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, memberNumber, false, eager);
            if (allRooms) {
                setRooms(allRooms.filter((room) => room.isAvailable() && room.code === props.engine.getRoomCode()));
            }
        }
        finally {
            setLoading(false);
        }
    });
    const getButtonLabelHandler = () => {
        return t(Translation_1.Translation.Misc.BookNow);
    };
    const updateNumberOfAdultsOnChange = (value) => {
        updatePeopleValues({ adults: +value });
    };
    const updateNumberOfChildrenOnChange = (value) => {
        updatePeopleValues({ children: +value });
    };
    const updateNumberOfInfantsOnChange = (value) => {
        updatePeopleValues({ infants: +value });
    };
    const defaultGuestValue = {
        adults: (_c = row === null || row === void 0 ? void 0 : row.getAdults()) !== null && _c !== void 0 ? _c : 1,
        children: (_d = row === null || row === void 0 ? void 0 : row.getChildren()) !== null && _d !== void 0 ? _d : 0,
        infants: 0,
        room: 1,
    };
    const updatePromoCode = (code) => {
        DataLayer_1.default.instance.sendInteraction('Promo Code updated', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
        if (row) {
            row.setPromoCode(code);
            basketContext.updateBasketRow(row);
            if (code) {
                setIsPromoModalOpen(false);
            }
        }
    };
    const onAddToBasketOverrideHandler = (rate) => {
        row.setRate(rate);
        basketContext.updateBasketRow(row);
        DataLayer_1.default.instance.sendRoomRateAddToCart(rate, row.getNumberOfDays(), row.getStartDate(), row.getEndDate(), row.getPreUpsellRoomRate());
        const session = props.engine.getSessionProvider();
        session
            .updateSessionAsync({
            step: StepConfirmation_1.default.getName(), // TODO:
        })
            .then(() => {
            var _a, _b;
            // TODO: Remove this URL coupling (can we get the hotel's checkout URL from Hotel in database instead?)
            // Allow override via window.RoomstayCheckoutUrlOverride (e.g., '/checkout/?park=ParkName')
            const checkoutUrl = (_b = (_a = window.RoomstayCheckoutUrlOverride) !== null && _a !== void 0 ? _a : hotel === null || hotel === void 0 ? void 0 : hotel.checkoutUrl) !== null && _b !== void 0 ? _b : '/checkout/';
            window.open(`${checkoutUrl}#${StepConfirmation_1.default.getStepUrl()}?session=${session.getCurrentSessionID()}`, '_self');
        });
    };
    const openPromoModalOnClick = () => {
        setIsPromoModalOpen(true);
    };
    const setPromoCodeOnClose = () => {
        setPromoCode(row === null || row === void 0 ? void 0 : row.getPromoCode());
        setIsPromoModalOpen(false);
    };
    const cancelPromoPopupOnClick = () => {
        DataLayer_1.default.instance.sendInteraction('Cancel Promo Popup', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
        setIsPromoModalOpen(false);
    };
    const changePromoCode = (val) => {
        updatePromoCode(val);
    };
    const maxOccupancy = (_e = hotel === null || hotel === void 0 ? void 0 : hotel.maxOccupancy) !== null && _e !== void 0 ? _e : 1;
    const DatePickerSelector = () => {
        const inner = () => {
            if (isCardLayout) {
                return (react_1.default.createElement("div", { className: (0, classnames_1.default)('u-cursor-pointer', InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-dates-inner']) },
                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']) },
                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar })),
                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.CheckIn)),
                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'], type: Text_1.TextType.Body, color: Color_1.Color.Navy }, (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? row.getArrivalDate() : t(Translation_1.Translation.Misc.CheckInPlaceHolder)))),
                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']) },
                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar })),
                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.CheckOut)),
                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'] }, (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? row.getDepartureDate() : t(Translation_1.Translation.Misc.CheckOutPlaceHolder))))));
            }
            else {
                return (react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getArrivalDate()) },
                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? row.getArrivalDate() : 'Arrival Date')),
                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-marg-right u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getDepartureDate()) },
                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? row.getDepartureDate() : 'Departure Date'))));
            }
        };
        return (react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row === null || row === void 0 ? void 0 : row.getStartDate(), selectedDateChanged: updateDateValues, className: (0, classnames_1.default)('rs-inline-filter-item-dates', {
                'u-w-100@xl- room-builder-progress--value u-marg-left--none ': !isCardLayout,
                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-dates']]: isCardLayout,
            }), roomCode: props.engine.getRoomCode() },
            react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere), wrapperClasses: "u-w-100@xl-" }, inner())));
    };
    const renderGuestSelector = () => {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        if (isCardLayout) {
            const numChildren = ((_a = row === null || row === void 0 ? void 0 : row.getChildren) === null || _a === void 0 ? void 0 : _a.call(row)) || 0;
            const maxAdults = maxOccupancy - numChildren;
            const maxChildren = maxOccupancy + 1 - (((_b = row === null || row === void 0 ? void 0 : row.getAdults) === null || _b === void 0 ? void 0 : _b.call(row)) || 0);
            return (react_1.default.createElement(exports.GuestSelectorCustom, { maxAdults: maxAdults, maxChildren: maxChildren, maxInfants: maxInfants, onChange: (newValue) => {
                    updatePeopleValues({
                        adults: +newValue.adults,
                        children: +newValue.children,
                    });
                }, disableChild: false, showInfants: showInfants, disableRoom: true, applyButton: false, defaultValue: defaultGuestValue, promoCodeConfig: {
                    promoCode: (_c = basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCode(),
                    setPromoCode,
                    onChange: changePromoCode,
                    valid: ((_d = basketContext.selectedBasketRow) === null || _d === void 0 ? void 0 : _d.getPromoCodeStatus()) !== 'new' ? ((_e = basketContext.selectedBasketRow) === null || _e === void 0 ? void 0 : _e.getPromoCodeStatus()) === 'valid' : undefined,
                }, row: row }));
        }
        else {
            const maxInfantsNum = !!maxInfants ? maxInfants + 1 : maxOccupancy + 1 - ((row === null || row === void 0 ? void 0 : row.getAdults()) ? row.getAdults() : 0);
            return (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateAdults), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-adult" },
                    react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center " },
                        react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy - ((row === null || row === void 0 ? void 0 : row.getChildren()) ? row.getChildren() : 0))].map((v, value) => {
                                value += 1;
                                return {
                                    text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Adult, t),
                                    value: value.toString(),
                                };
                            }), value: (_f = row === null || row === void 0 ? void 0 : row.getAdults()) === null || _f === void 0 ? void 0 : _f.toString(), onChange: updateNumberOfAdultsOnChange, keyName: "value", labelName: "text" }))),
                react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateChildren), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-children" },
                    react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center" },
                        react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy + 1 - ((row === null || row === void 0 ? void 0 : row.getAdults()) ? row.getAdults() : 0))].map((v, value) => {
                                return {
                                    text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Child, t),
                                    value: value.toString(),
                                };
                            }), value: (_g = row === null || row === void 0 ? void 0 : row.getChildren()) === null || _g === void 0 ? void 0 : _g.toString(), onChange: updateNumberOfChildrenOnChange, keyName: "value", labelName: "text" }))),
                showInfants ? (react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateInfants), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-infants" },
                    react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center" },
                        react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxInfantsNum)].map((v, value) => {
                                return {
                                    text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Infant, t),
                                    value: value.toString(),
                                };
                            }), value: (_h = row === null || row === void 0 ? void 0 : row.getInfants()) === null || _h === void 0 ? void 0 : _h.toString(), onChange: updateNumberOfInfantsOnChange, keyName: "value", labelName: "text" })))) : (react_1.default.createElement(react_1.default.Fragment, null))));
        }
    };
    return (0, react_1.useMemo)(() => {
        var _a, _b, _c;
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: (0, classnames_1.default)(`room-builder-progress ${isCompact} rs-inline-container`, {
                    [InlineRoomMiniEngine_module_scss_1.default['rs-inline-container']]: isCardLayout,
                    [InlineRoomMiniEngine_module_scss_1.default['rs-inline-container--card-layout']]: isCardLayout,
                }) },
                react_1.default.createElement("div", { className: (0, classnames_1.default)('rs-inline-filter-container', {
                        'u-flex w-100 flex-wrap room-builder-progress--item --current': !isCardLayout,
                        [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-container']]: isCardLayout,
                    }), ref: ref },
                    react_1.default.createElement("div", { className: (0, classnames_1.default)('rs-inline-filter-inner', {
                            'u-flex u-flex-align-center flex-wrap flex-row u-w-100@xl-': !isCardLayout,
                            [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-inner']]: isCardLayout,
                        }) },
                        react_1.default.createElement(DatePickerSelector, null),
                        renderGuestSelector(),
                        react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: (0, classnames_1.default)('u-w-100@xl- rs-inline-filter-item-promo', {
                                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-promo']]: isCardLayout,
                            }) },
                            react_1.default.createElement("div", { className: "room-builder-progress--value u-cursor-pointer", ref: thisElement, onClick: openPromoModalOnClick },
                                react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl-" },
                                    react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: (row === null || row === void 0 ? void 0 : row.getPromoCode()) ? row === null || row === void 0 ? void 0 : row.getPromoCodeColour() : Color_1.Color.Navy }, (row === null || row === void 0 ? void 0 : row.getPromoCode()) ? row === null || row === void 0 ? void 0 : row.getPromoCode() : 'Promo Code'),
                                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })))),
                        react_1.default.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, container: RoomstayThemeEngine_1.default.EngineContainer, followElement: thisElement.current, onClose: setPromoCodeOnClose },
                            react_1.default.createElement("div", { className: "u-pad--heavy" },
                                react_1.default.createElement("div", null,
                                    react_1.default.createElement(PromoCodeInput_1.default, { value: (_a = basketContext.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getPromoCode(), onChange: changePromoCode, valid: ((_b = basketContext.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCodeStatus()) !== BasketRow_1.EPromoCodeStatus.New
                                            ? ((_c = basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCodeStatus()) === BasketRow_1.EPromoCodeStatus.Valid
                                            : undefined, row: basketContext.selectedBasketRow })),
                                react_1.default.createElement("div", { className: "u-flex justify-content-end align-items-center u-marg-top" },
                                    react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", onClick: cancelPromoPopupOnClick }, t(Translation_1.Translation.Misc.Cancel)))))),
                    react_1.default.createElement("div", { className: (0, classnames_1.default)(`u-flex flex-xl-nowrap flex-row rs-inline-filter-button`, {
                            'w-100': isCompact,
                            [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-button']]: isCardLayout,
                        }) },
                        react_1.default.createElement(BEButton_1.default, { filled: true, primary: true, isLoading: isLoading, wide: isCompact !== '', onClick: () => fetchAvailability() }, t(Translation_1.Translation.Misc.CheckRates)))),
                react_1.default.createElement("div", { className: (0, classnames_1.default)('u-border-rounded rs-inline-content', {
                        [InlineRoomMiniEngine_module_scss_1.default['rs-inline-content']]: isCardLayout,
                    }) }, !isLoading ? (react_1.default.createElement(AutoAutoHeight_1.default, { open: !isLoading },
                    react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(BookNowPayLaterInfoBlock_1.BookNowPayLaterInfoBlock, null),
                        rooms.length > 0 ? (react_1.default.createElement(RoomRates_1.default, { classNames: (0, classnames_1.default)('rs-inline-content-list', {
                                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-content-list']]: isCardLayout,
                            }), featuredRates: featuredRates, rates: standardRates, roomCode: rooms[0].code, getButtonLabel: getButtonLabelHandler, onAddToBasketOverride: onAddToBasketOverrideHandler, isCardLayout: isCardLayout, policy: policy, priceDescription: priceDescription })) : (react_1.default.createElement(RatesNotFoundBlock_1.default, null))))) : (react_1.default.createElement(LargeLoader_1.default, null))))));
    }, [isCompact, isLoading, rooms, basketContext.currentBasketRows, isPromoModalOpen, hotel, standardRates]);
}
const renderInlineRoomMiniEngineElement = (container, engine) => {
    (0, react_dom_1.render)(react_1.default.createElement(contexts_1.BookingEngineContextWrapper, { engine: engine },
        react_1.default.createElement(react_router_dom_1.HashRouter, { future: {
                v7_startTransition: false,
                v7_relativeSplatPath: false,
            } },
            react_1.default.createElement(NotificationContext_1.NotificationContextWrapper, null,
                react_1.default.createElement(ErrorContext_1.ErrorContextWrapper, null,
                    react_1.default.createElement(contexts_1.CompanyContextWrapper, { configCompany: engine.getConfig().company },
                        react_1.default.createElement(contexts_1.BasketContextWrapper, null,
                            react_1.default.createElement(InlineRoomMiniEngineElement, { engine: engine }))))))), container);
};
exports.renderInlineRoomMiniEngineElement = renderInlineRoomMiniEngineElement;
const GuestSelectorCustom = ({ maxAdults, maxChildren, maxInfants = 10, defaultValue, onChange, disableChild, showInfants, disableRoom, applyButton, promoCodeConfig, row, }) => {
    var _a, _b, _c, _d;
    const { t } = (0, react_i18next_1.useTranslation)();
    const ref = react_1.default.useRef(null);
    const targetRef = (0, react_1.useRef)(null);
    const [adults, setAdults] = (0, react_1.useState)((_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.adults) !== null && _a !== void 0 ? _a : 1);
    const [children, setChildren] = (0, react_1.useState)((_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.children) !== null && _b !== void 0 ? _b : 0);
    const [infants, setInfants] = (0, react_1.useState)((_c = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.infants) !== null && _c !== void 0 ? _c : 0);
    const [room, setRoom] = (0, react_1.useState)((_d = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.room) !== null && _d !== void 0 ? _d : 1);
    const [open, setOpen] = (0, react_1.useState)(false);
    const prevOpenRef = (0, react_1.useRef)(open);
    (0, react_1.useEffect)(() => {
        const wasOpen = prevOpenRef.current;
        prevOpenRef.current = open;
        if (wasOpen && !open) {
            // onChange is only called when the modal is closed
            onChange === null || onChange === void 0 ? void 0 : onChange({ adults, children, infants, room });
        }
    }, [open, adults, children, infants, room, onChange]);
    const onChangeAdults = (newValue) => {
        setAdults(newValue);
    };
    const onChangeChildren = (newValue) => {
        setChildren(newValue);
    };
    const onChangeInfants = (newValue) => {
        setInfants(newValue);
    };
    const onChangeRoom = (newValue) => {
        setRoom(newValue);
    };
    const inner = () => {
        return (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['popper--box'] },
            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['popper--content'], ref: ref },
                react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(adults, 'Adult', t)),
                        react_1.default.createElement(NumberIncrement_1.default, { number: adults, min: 1, max: maxAdults, onChange: (value) => onChangeAdults(value), textSize: Text_1.TextType.Small }))),
                disableChild ? null : (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(children, 'Child', t)),
                        react_1.default.createElement(NumberIncrement_1.default, { number: children, min: 0, max: maxChildren, onChange: (value) => onChangeChildren(value), textSize: Text_1.TextType.Small })))),
                showInfants ? (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(infants, 'Infant', t)),
                        react_1.default.createElement(NumberIncrement_1.default, { number: infants, min: 0, onChange: (value) => onChangeInfants(value), textSize: Text_1.TextType.Small })),
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }))) : null,
                disableRoom ? null : (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(room, 'Room', t)),
                        react_1.default.createElement(NumberIncrement_1.default, { number: room, min: 1, max: 10, onChange: (value) => onChangeRoom(value), textSize: Text_1.TextType.Small })))),
                promoCodeConfig ? (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default.row) },
                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, t(Translation_1.Translation.Misc.Promocode)),
                        react_1.default.createElement(PromoCodeInput_1.default, { className: InlineRoomMiniEngine_module_scss_1.default.promo, value: promoCodeConfig.promoCode, onChange: promoCodeConfig.onChange, valid: promoCodeConfig.valid, row: row })))) : null)));
    };
    const content = () => {
        return (react_1.default.createElement(Overlay_1.Overlay, { offset: [0, 6], usePortal: false, followElement: targetRef.current, placement: "top-start", strategy: "absolute", open: open, onClose: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(false), className: InlineRoomMiniEngine_module_scss_1.default.popper, hideStyles: true }, inner()));
    };
    const getValueAsText = () => {
        const parts = [StringHelper_1.default.pluralWithCount(adults, 'Adult', t)];
        if (children > 0) {
            parts.push(StringHelper_1.default.pluralWithCount(children, 'Child', t));
        }
        if (infants > 0) {
            parts.push(StringHelper_1.default.pluralWithCount(infants, 'Infant', t));
        }
        return parts.join(' - ');
    };
    return (react_1.default.createElement("div", { ref: targetRef, className: (0, classnames_1.default)('u-cursor-pointer', 'rs-inline-filter-item-guest', InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-guest']) },
        react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']), onClick: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(!open) },
            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.People })),
            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
                react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.Guests)),
                react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'], type: Text_1.TextType.Body, color: Color_1.Color.Navy }, getValueAsText())),
            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
        content()));
};
exports.GuestSelectorCustom = GuestSelectorCustom;
//# sourceMappingURL=InlineRoomMiniEngineElement.js.map