"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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const contexts_1 = require("../../../contexts/index.js");
const events_1 = require("../../../events/index.js");
const hooks_1 = require("../../../hooks/index.js");
const HotelOverridesContext_1 = require("contexts/HotelOverridesContext");
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const Translation_1 = require("translations/Translation");
const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
const LineBreak_1 = __importDefault(require("../../../components/generic/LineBreak"));
const Text_1 = __importDefault(require("../../../components/generic/Text"));
const BEPeoplePickerBlock_1 = __importDefault(require("../../../components/steps/date/BEPeoplePickerBlock"));
const StepDatePricePerRoom_1 = __importDefault(require("../../../components/steps/date/StepDatePricePerRoom"));
const StepOneDateRange_1 = __importDefault(require("../../../components/steps/date/StepOneDateRange"));
const StepOneDateRangePicker_1 = __importDefault(require("../../../components/steps/date/StepOneDateRangePicker"));
const StepOneDateRangePickerLegend_1 = __importDefault(require("../../../components/steps/date/StepOneDateRangePickerLegend"));
const StepOneNextStepButton_1 = __importDefault(require("../../../components/steps/date/StepOneNextStepButton"));
const StepOneStatusPeople_1 = __importDefault(require("../../../components/steps/date/StepOneStatusPeople"));
const StepDateNextButtonAboveDatepickerFeature_1 = __importDefault(require("../../../providers/feature/StepDateNextButtonAboveDatepickerFeature"));
const Color_1 = require("../../../util/Color");
const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
const StepDate_1 = __importDefault(require("./StepDate"));
const BEMobileSummary = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../../../components/summary/BEMobileSummary'))));
const StepDateComponent = () => {
    const { currentStep } = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
    const { selectedBasketRow, selectBasketRow } = basketContext;
    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
    const { hideByLine } = (0, react_1.useContext)(HotelOverridesContext_1.HotelOverridesContext);
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const { t } = (0, react_i18next_1.useTranslation)();
    const peopleRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        if (context.screenSize <= ScreenSize_1.default.Medium && basketContext.endDate) {
            if (peopleRef) {
                setTimeout(() => {
                    var _a, _b;
                    (_b = (_a = peopleRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { behavior: 'smooth', block: 'center', inline: 'nearest' });
                }, 50);
            }
        }
    }, [basketContext.endDate]);
    const { raise } = (0, hooks_1.useEvent)();
    (0, react_1.useEffect)(() => {
        const event = new events_1.StepDateViewEvent();
        raise(event);
    }, []);
    (0, react_1.useEffect)(() => {
        /**
         * Ensures that a basket row is always selected when navigating back to the "Step Date" step.
         *
         * - In [Step Room], after assigning a rate, the selected basket row may be set to null.
         * - When navigating back to [Step Date], ensure that at least one basket row is selected.
         */
        if (currentStep.getName() === StepDate_1.default.getName() && !selectedBasketRow) {
            selectBasketRow(null);
        }
    }, [currentStep, selectedBasketRow]);
    return (react_1.default.createElement("div", { className: "container rs-step-date" },
        context.screenSize <= ScreenSize_1.default.Medium && react_1.default.createElement(BEMobileSummary, null),
        context.screenSize >= ScreenSize_1.default.Large && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: "row step-date-hotel-info" },
                react_1.default.createElement("div", { className: "col-md-4 col-lg-3" },
                    react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                        react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Date.Reservation))),
                    react_1.default.createElement(Headline_1.default, { className: "hotel-name", color: Color_1.Color.Navy }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
                    !hideByLine && (react_1.default.createElement(Text_1.default, { className: "company-name", color: Color_1.Color.DarkGrey },
                        t(Translation_1.Translation.Misc.By),
                        " ",
                        ccx.name))),
                react_1.default.createElement("div", { className: "col-md-8 col-lg-9" },
                    react_1.default.createElement("div", { className: "row justify-content-between" },
                        react_1.default.createElement("div", { className: "col-md-6" },
                            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                                react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Date.SelectYourDate))),
                            react_1.default.createElement("div", { className: "step-one-status" },
                                react_1.default.createElement(StepOneDateRange_1.default, null),
                                react_1.default.createElement(StepOneStatusPeople_1.default, null))),
                        react_1.default.createElement("div", { className: "col-md-4" }, StepDateNextButtonAboveDatepickerFeature_1.default.isActive() ? (react_1.default.createElement(react_1.default.Fragment, null,
                            react_1.default.createElement("div", { className: "u-flex justify-content-end align-items-end" },
                                react_1.default.createElement(StepDatePricePerRoom_1.default, { isMobile: false })),
                            react_1.default.createElement("div", { className: "u-flex justify-content-end u-marg-top--heavy" },
                                react_1.default.createElement(StepOneNextStepButton_1.default, null)))) : (react_1.default.createElement(StepDatePricePerRoom_1.default, { isMobile: false })))))),
            react_1.default.createElement(LineBreak_1.default, null))),
        StepDateNextButtonAboveDatepickerFeature_1.default.isActive() && context.screenSize < ScreenSize_1.default.Large && (react_1.default.createElement("div", { className: "u-marg-top--heavy u-marg-bottom--heavy next-step-button--above" },
            react_1.default.createElement(StepOneNextStepButton_1.default, null))),
        react_1.default.createElement("div", { className: "row flex-column-reverse flex-md-row align-items-center align-items-md-start" },
            react_1.default.createElement("div", { ref: peopleRef, className: "col-md-4 col-xl-3" },
                react_1.default.createElement(BEPeoplePickerBlock_1.default, null)),
            react_1.default.createElement("div", { className: "col-md-8 col-xl-9" },
                react_1.default.createElement("div", { className: "w-100 u-flex justify-content-center flex-column align-items-center" },
                    react_1.default.createElement(react_1.Suspense, { fallback: "loading...." },
                        react_1.default.createElement(StepOneDateRangePicker_1.default, null))),
                context.screenSize >= ScreenSize_1.default.Large ? react_1.default.createElement(StepOneDateRangePickerLegend_1.default, null) : react_1.default.createElement(LineBreak_1.default, null))),
        !StepDateNextButtonAboveDatepickerFeature_1.default.isActive() && (react_1.default.createElement("div", { className: "u-flex justify-content-end" },
            react_1.default.createElement(StepOneNextStepButton_1.default, null)))));
};
exports.default = StepDateComponent;
//# sourceMappingURL=StepDateComponent.js.map