"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 });
exports.default = HotelInfo;
const events_1 = require("../../events/index.js");
const hooks_1 = require("../../hooks/index.js");
const classnames_1 = __importDefault(require("classnames"));
const fslightbox_react_1 = __importDefault(require("fslightbox-react"));
const HistoryConsistentPush_1 = require("hooks/HistoryConsistentPush");
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const Translation_1 = require("translations/Translation");
const BEButton_1 = __importDefault(require("../../components/generic/BEButton"));
const Headline_1 = __importDefault(require("../../components/generic/Headline"));
const Icon_1 = __importStar(require("../../components/generic/Icon/Icon"));
const HotelLocationMap_1 = __importDefault(require("../../components/generic/map/HotelLocationMap"));
const PageTitle_1 = require("../../components/generic/PageTitle");
const Text_1 = __importStar(require("../../components/generic/Text"));
const HotelInfoPerksRow_1 = __importDefault(require("../../components/steps/hotel/HotelInfoPerksRow"));
const TransportDistanceFromHotelBlock_1 = __importDefault(require("../../components/summary/TransportDistanceFromHotelBlock"));
const index_1 = require("../../index");
const ImageProvider_1 = __importStar(require("../../providers/ImageProvider"));
const Color_1 = require("../../util/Color");
const ScreenSize_1 = __importDefault(require("../../util/ScreenSize"));
const StepManager_1 = __importDefault(require("../../util/StepManager"));
function HotelInfo() {
    var _a, _b, _c, _d, _e, _f, _g;
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const historyConsistentPush = (0, HistoryConsistentPush_1.useHistoryConsistentPush)();
    const { t } = (0, react_i18next_1.useTranslation)();
    const context = (0, react_1.useContext)(index_1.BookingEngineContext);
    const isMobile = context.screenSize <= ScreenSize_1.default.Large;
    const imageUrl = hotel === null || hotel === void 0 ? void 0 : hotel.heroImage;
    const { line1, line2, postalCode, country } = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) !== null && _a !== void 0 ? _a : {};
    const [lightboxController, setLightboxController] = (0, react_1.useState)({ toggler: false, slide: 1 });
    const [images, setImages] = (0, react_1.useState)([]);
    const openSlider = (slide) => {
        setLightboxController((controller) => ({ toggler: !controller.toggler, slide: slide + 1 }));
    };
    const openSliderOnClick = () => {
        openSlider(4);
    };
    const { raise } = (0, hooks_1.useEvent)();
    (0, react_1.useEffect)(() => {
        const event = new events_1.StepHotelInfoViewEvent();
        raise(event);
    }, []);
    (0, react_1.useEffect)(() => {
        var _a, _b;
        const newImages = [];
        if ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.images) === null || _a === void 0 ? void 0 : _a.length) {
            newImages.push(...hotel.images);
        }
        if (hotel === null || hotel === void 0 ? void 0 : hotel.rooms) {
            for (const room of Object.values(hotel === null || hotel === void 0 ? void 0 : hotel.rooms)) {
                (_b = room.images) === null || _b === void 0 ? void 0 : _b.forEach((image) => {
                    newImages.push(image);
                });
            }
        }
        setImages(newImages);
    }, [hotel === null || hotel === void 0 ? void 0 : hotel.images, hotel === null || hotel === void 0 ? void 0 : hotel.rooms]);
    const onBookNowClick = () => {
        historyConsistentPush(StepManager_1.default.getFirstStep().getStepUrl());
    };
    const getImage = (index) => {
        const openSliderOnClickHandler = () => {
            openSlider(index);
        };
        const resizedUrl = ImageProvider_1.default.resizeImage(images[index], ImageProvider_1.ImageSize.Small);
        return (react_1.default.createElement("div", { style: { backgroundImage: `url('${resizedUrl}')`, paddingTop: '75%' }, className: "c-images u-block u-w-100 u-marg-bottom u-marg-bottom--heavy", onClick: openSliderOnClickHandler }));
    };
    const hotelServices = ((_b = hotel === null || hotel === void 0 ? void 0 : hotel.hotelServices) === null || _b === void 0 ? void 0 : _b.filter(({ name }) => !!name)) || [];
    const quoteImage = isMobile ? hotel === null || hotel === void 0 ? void 0 : hotel.quoteImageMobile : hotel === null || hotel === void 0 ? void 0 : hotel.quoteImageDesktop;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(PageTitle_1.PageTitle, { step: "HotelInfo" }),
        react_1.default.createElement("div", { style: { backgroundImage: `url('${imageUrl && ImageProvider_1.default.resizeImage(imageUrl, ImageProvider_1.ImageSize.Original)}')` }, className: (0, classnames_1.default)('c-masthead has-tint', 'rs-background-hotel-info', `rs-background-${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`) },
            react_1.default.createElement("div", { className: "container" },
                react_1.default.createElement("div", { className: "c-masthead__body u-fill-white u-pad--heavy u-shadow-accent" },
                    react_1.default.createElement("h1", { className: "c-masthead__header" }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
                    react_1.default.createElement("h2", { className: "c-masthead__sub-header" }, (_c = hotel === null || hotel === void 0 ? void 0 : hotel.countryPrefix) !== null && _c !== void 0 ? _c : '',
                        " ", (_d = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _d === void 0 ? void 0 :
                        _d.country)))),
        react_1.default.createElement("div", { className: "u-fill-snow u-pad--heavy-med u-pad-top-bottom--heavy@m-" },
            react_1.default.createElement("div", { className: "container" },
                react_1.default.createElement("div", { className: "row" },
                    react_1.default.createElement("div", { className: "col-md-6 u-flex align-items-center" },
                        react_1.default.createElement("ul", null,
                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Map, size: "1.3em", color: Color_1.Color.Accent }),
                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" },
                                    line1,
                                    react_1.default.createElement("br", null),
                                    line2,
                                    " ",
                                    postalCode,
                                    ", ",
                                    country)),
                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "1.3em", color: Color_1.Color.Accent }),
                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone)),
                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Hotel2, size: "1.3em", color: Color_1.Color.Accent }),
                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" },
                                    react_1.default.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl, style: { color: 'var(--rs-color-accent-1)' } }, hotel === null || hotel === void 0 ? void 0 : hotel.name))),
                            react_1.default.createElement("li", { className: "u-flex" },
                                react_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight, primary: true, filled: true, iconPosition: "right", onClick: onBookNowClick }, t(Translation_1.Translation.Misc.BookNow))))),
                    react_1.default.createElement("div", { className: "col-md-6" },
                        react_1.default.createElement("div", { className: "c-overlap" },
                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy u-marg-top u-marg-top--heavy", style: { height: '240px' } },
                                react_1.default.createElement(HotelLocationMap_1.default, null)),
                            react_1.default.createElement("div", { className: "u-flex u-flex-column justify-content-center rs-hotelinfo-transport-distance u-w-100" },
                                react_1.default.createElement(TransportDistanceFromHotelBlock_1.default, { hotel: hotel }))))))),
        react_1.default.createElement("div", { className: "u-pad u-pad--heavy-plus u-pad-top-bottom--heavy@m-" },
            react_1.default.createElement("div", { className: "container rs-hotelinfo" },
                react_1.default.createElement("div", { className: "row" },
                    react_1.default.createElement("div", { className: "col-lg-6" },
                        react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                                react_1.default.createElement(Headline_1.default, { className: "rs-hotelinfo-about", bold: true }, t(Translation_1.Translation.Step.Hotel.About))),
                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                    react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: ((_e = hotel === null || hotel === void 0 ? void 0 : hotel.description) === null || _e === void 0 ? void 0 : _e.replace('\r\n', '<br/><br/>')) || '' } })),
                                !!(hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) && (react_1.default.createElement(react_1.default.Fragment, null,
                                    react_1.default.createElement("div", { className: "u-marg-top" },
                                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                            react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Hotel.Location)))),
                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: (_f = hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) === null || _f === void 0 ? void 0 : _f.replace('\r\n', '<br/><br/>') } }))))),
                            !!((_g = hotel === null || hotel === void 0 ? void 0 : hotel.perks) === null || _g === void 0 ? void 0 : _g.length) && (react_1.default.createElement(react_1.default.Fragment, null,
                                react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                        react_1.default.createElement("strong", { className: "rs-hotelinfo-andyougetall" }, hotel.perkTitle || t(Translation_1.Translation.Step.Hotel.AndYouGetAll)))),
                                react_1.default.createElement("div", { className: "row" },
                                    react_1.default.createElement(HotelInfoPerksRow_1.default, { hotel: hotel })),
                                (hotel === null || hotel === void 0 ? void 0 : hotel.perksShowDisclaimer) && (react_1.default.createElement("div", { className: "row u-marg-top--lighter" },
                                    react_1.default.createElement("small", { className: "col-12" }, t(Translation_1.Translation.Misc.PerksDisclaimer))))))),
                        !!hotelServices.length && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                                react_1.default.createElement(Headline_1.default, { className: "rs-hotelinfo-hotelamenities", bold: true }, t(Translation_1.Translation.Step.Hotel.HotelAmenities))),
                            react_1.default.createElement("div", { className: "row" }, hotelServices.map((hotelService, index) => {
                                return (react_1.default.createElement("div", { key: index, className: "col-md-6" },
                                    react_1.default.createElement("div", { className: "u-flex u-marg-bottom" },
                                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Check, color: Color_1.Color.White, backgroundColor: Color_1.Color.Accent, borderRadius: "round", noPadding: true, size: "16px" }),
                                        react_1.default.createElement("span", { className: "u-flex__item u-marg-left--light" },
                                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, hotelService.name)))));
                            })))),
                        !!(hotel === null || hotel === void 0 ? void 0 : hotel.policies) && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                                react_1.default.createElement(Headline_1.default, { className: "rs-hotelinfo-policies", bold: true }, t(Translation_1.Translation.Step.Hotel.Policies))),
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                react_1.default.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.policies, target: "_blank", style: { color: hotel === null || hotel === void 0 ? void 0 : hotel.colors.accent }, rel: "noreferrer" }, hotel === null || hotel === void 0 ? void 0 : hotel.policies)))),
                        quoteImage && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                            react_1.default.createElement(QuoteImage, { isMobile: isMobile, className: (0, classnames_1.default)('u-marg-bottom--heavy rs-hotelinfo-quote-images', {
                                    '--mobile': isMobile,
                                    '--desktop': !isMobile,
                                }), src: quoteImage })))),
                    react_1.default.createElement("div", { className: "col-lg-6" },
                        react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
                                react_1.default.createElement(Headline_1.default, { className: "rs-hotelinfo-gallery", bold: true }, t(Translation_1.Translation.Step.Hotel.Gallery))),
                            images.length >= 1 && getImage(0),
                            react_1.default.createElement("div", { className: "row" },
                                [1, 2, 3].map((index) => {
                                    if (images.length > index) {
                                        return (react_1.default.createElement("div", { key: index, className: "col-6" }, getImage(index)));
                                    }
                                }),
                                images.length > 5 && (react_1.default.createElement("div", { className: "col-6" },
                                    react_1.default.createElement("div", { className: "c-images c-images--more", onClick: openSliderOnClick },
                                        getImage(4),
                                        react_1.default.createElement("span", null,
                                            "+ ",
                                            images.length - 5)))))))))),
        !!(images === null || images === void 0 ? void 0 : images.length) && (react_1.default.createElement(fslightbox_react_1.default, { toggler: lightboxController.toggler, slide: lightboxController.slide, sources: images.map((image) => ImageProvider_1.default.resizeImage(image, ImageProvider_1.ImageSize.Original)), type: "image" }))));
}
const QuoteImage = ({ src, className, isMobile }) => {
    const [aspectRatio, setAspectRatio] = (0, react_1.useState)(null);
    const [imageHeight, setImageHeight] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        if (!src)
            return;
        const img = new Image();
        img.src = src;
        img.onload = () => setAspectRatio(img.width > 0 ? img.height / img.width : 1); // Fallback aspect ratio
        img.onerror = () => {
            console.error('Failed to load image');
            setAspectRatio(1);
        };
    }, [src]);
    (0, react_1.useEffect)(() => {
        if (!isMobile || aspectRatio === null || typeof window === 'undefined')
            return;
        const updateHeight = () => setImageHeight(window.innerWidth * aspectRatio);
        updateHeight();
        window.addEventListener('resize', updateHeight);
        return () => window.removeEventListener('resize', updateHeight);
    }, [aspectRatio, isMobile]);
    return (react_1.default.createElement("div", { className: className, style: { width: '100%', textAlign: 'center' } }, src && (react_1.default.createElement("img", { src: src, alt: "Quote", style: {
            width: '100%',
            height: isMobile && imageHeight ? `${imageHeight}px` : 'auto',
            objectFit: 'contain', // Ensures full image is visible, no cropping
            display: 'block', // Prevents inline whitespace issue
            margin: '0 auto', // Centers the image in the div
        } }))));
};
//# sourceMappingURL=HotelInfo.js.map