"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 = Header;
const contexts_1 = require("../../contexts/index.js");
const hooks_1 = require("../../hooks/index.js");
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const react_router_dom_1 = require("react-router-dom");
const Translation_1 = require("translations/Translation");
const Fade_1 = __importDefault(require("../../animations/Fade"));
const BEButton_1 = __importDefault(require("../generic/BEButton"));
const Icon_1 = __importStar(require("../generic/Icon/Icon"));
const SmallSpinner_1 = __importDefault(require("../generic/loader/SmallSpinner"));
const Portal_1 = require("../generic/Portal/Portal");
const Select_1 = require("../generic/Select/Select");
const Text_1 = __importStar(require("../generic/Text"));
const StepHotel_1 = __importDefault(require("../../pages/steps/StepHotel/StepHotel"));
const GiftCardFeature_1 = __importDefault(require("../../providers/feature/GiftCardFeature"));
const HotelGroupFeature_1 = __importDefault(require("../../providers/feature/HotelGroupFeature"));
const MemberPortalFeature_1 = __importDefault(require("../../providers/feature/MemberPortalFeature"));
const LanguageProvider_1 = require("../../providers/LanguageProvider");
const RoomstayThemeEngine_1 = __importDefault(require("../../providers/RoomstayThemeEngine"));
const Color_1 = require("../../util/Color");
const currencyHelper = __importStar(require("../../util/CurrencyHelper"));
const DataLayer_1 = __importDefault(require("../../util/DataLayer"));
const RouteManager_1 = require("../../util/RouteManager");
const UnauthenticatedUserModal = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('../generic/modal/SigninModal/UnauthenticatedUserModal'))).then(({ UnauthenticatedUserModal }) => ({
    default: UnauthenticatedUserModal,
})));
const AuthenticatedUserModal = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('../generic/modal/SigninModal/AuthenticatedUserModal'))).then(({ AuthenticatedUserModal }) => ({
    default: AuthenticatedUserModal,
})));
const LogoLink = ({ url, mobileMenuOpen, children, onClick, className }) => {
    return mobileMenuOpen ? (react_1.default.createElement(react_router_dom_1.Link, { to: url, onClick: onClick, className: className }, children)) : (react_1.default.createElement("a", { href: url, onClick: onClick, className: className }, children));
};
function Header() {
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const location = (0, react_router_dom_1.useLocation)();
    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
    const { currentStep } = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
    const { roomstayMember, isFetchingMember } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
    const [loginAnchorEl, setLoginAnchorEl] = react_1.default.useState(null);
    const [hotelLogo, setHotelLogo] = (0, react_1.useState)('');
    const [showHotelLinks, setShowHotelLinks] = (0, react_1.useState)(true);
    const [mobileMenuOpen, setMobileMenuOpen] = (0, react_1.useState)(false);
    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = (0, react_1.useState)(false);
    const [loginModalOpen, setLoginModalOpen] = (0, react_1.useState)(false);
    const { t } = (0, react_i18next_1.useTranslation)();
    const availableLanguages = LanguageProvider_1.LanguageProvider.getLanguages();
    const langKeys = Object.keys(availableLanguages);
    const onLanguageChangeHandler = (selected) => {
        ccx.setCurrentLanguage(selected);
        LanguageProvider_1.LanguageProvider.changeLanguage(selected);
    };
    const onCurrencyChangeHandler = (selected) => {
        ccx.setCurrentCurrency(selected);
        DataLayer_1.default.instance.setCurrencyCodes(selected);
    };
    const closeMobileMenuClickHandler = () => {
        setMobileMenuFaderStatus(false);
    };
    const openMobileMenuClickHandler = () => {
        setMobileMenuFaderStatus(true);
    };
    const closeLoginClickHandler = () => {
        setLoginModalOpen(false);
    };
    const onLoginClickHandler = () => {
        setLoginModalOpen(true);
    };
    (0, react_1.useEffect)(() => {
        let timeout;
        if (mobileMenuFaderStatus) {
            setMobileMenuOpen(true);
            if (location.pathname.startsWith('/account')) {
                setLoginModalOpen(true);
            }
        }
        else {
            timeout = setTimeout(() => {
                setMobileMenuOpen(false);
            }, 500);
        }
        return () => {
            clearTimeout(timeout);
        };
    }, [mobileMenuFaderStatus]);
    (0, react_1.useEffect)(() => {
        let cancelled = false;
        const loadImage = (src) => {
            const image = new Image();
            image.onload = () => {
                if (!cancelled) {
                    setHotelLogo(src);
                }
            };
            image.src = src;
        };
        // Check the Logo per step
        if (hotel && !(currentStep === StepHotel_1.default)) {
            if (typeof (hotel === null || hotel === void 0 ? void 0 : hotel.logo) === 'string') {
                loadImage(hotel === null || hotel === void 0 ? void 0 : hotel.logo);
            }
        }
        else {
            loadImage(ccx.logo);
        }
        // Check wether we should display the hotel related links or not
        setShowHotelLinks(currentStep !== StepHotel_1.default && !!hotel);
        return () => {
            cancelled = true;
        };
    }, [hotel, hotel === null || hotel === void 0 ? void 0 : hotel.logo, ccx.logo, currentStep]);
    (0, react_1.useEffect)(() => {
        if (mobileMenuOpen) {
            document.body.style.setProperty('overflow', 'hidden');
        }
        return () => {
            document.body.style.removeProperty('overflow');
        };
    }, [mobileMenuOpen]);
    let hotelImageElement = hotelLogo ? react_1.default.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
    if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {
        hotelImageElement = react_1.default.createElement("img", { src: hotelImageElement, alt: "Hotel Logo" });
    }
    const CompanyLogo = ({ mobileMenuOpen }) => {
        var _a, _b, _c;
        if (!((_a = hotel === null || hotel === void 0 ? void 0 : hotel.company) === null || _a === void 0 ? void 0 : _a.logo))
            return react_1.default.createElement(react_1.default.Fragment, null);
        const url = ((_b = hotel === null || hotel === void 0 ? void 0 : hotel.company) === null || _b === void 0 ? void 0 : _b.url) || '#';
        return (react_1.default.createElement("div", { className: "c-header__logo-company" },
            react_1.default.createElement(LogoLink, { url: url, mobileMenuOpen: mobileMenuOpen, onClick: closeMobileMenuClickHandler },
                react_1.default.createElement("img", { src: (_c = hotel === null || hotel === void 0 ? void 0 : hotel.company) === null || _c === void 0 ? void 0 : _c.logo, alt: "Company Logo" }))));
    };
    const HotelLogo = ({ mobileMenuOpen }) => {
        const url = showHotelLinks ? (hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl) || '#' : (ccx === null || ccx === void 0 ? void 0 : ccx.logoLink) || '#';
        return (react_1.default.createElement("div", { className: "c-header__logo" },
            react_1.default.createElement(LogoLink, { url: url, mobileMenuOpen: mobileMenuOpen, onClick: closeMobileMenuClickHandler }, hotelImageElement)));
    };
    const links = (react_1.default.createElement("ul", { className: "c-header__list" },
        react_1.default.createElement("li", null,
            react_1.default.createElement(react_router_dom_1.NavLink, { to: Object.assign(Object.assign({}, location), { pathname: RouteManager_1.ROUTES.HOTEL_INFO }), className: ({ isActive }) => (isActive ? 'is-active' : ''), onClick: closeMobileMenuClickHandler },
                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.HotelInfo)))),
        GiftCardFeature_1.default.isActive() && (react_1.default.createElement("li", null,
            react_1.default.createElement(react_router_dom_1.NavLink, { to: "/gift-cards/purchase", className: ({ isActive }) => (isActive ? 'is-active' : ''), onClick: closeMobileMenuClickHandler },
                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.GiftCards))))),
        react_1.default.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (react_1.default.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank", rel: "noreferrer" },
            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation)))) : (react_1.default.createElement(react_router_dom_1.NavLink, { to: "/find-reservation", className: ({ isActive }) => (isActive ? 'is-active' : ''), onClick: closeMobileMenuClickHandler },
            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation))))),
        react_1.default.createElement("li", { className: "phone" },
            react_1.default.createElement("a", { href: `tel:${hotel === null || hotel === void 0 ? void 0 : hotel.phone}`, onClick: closeMobileMenuClickHandler },
                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, transforms: [Text_1.TextTransform.Uppercase], color: Color_1.Color.White, bold: true },
                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "16px", color: Color_1.Color.White }),
                    react_1.default.createElement("span", { className: "u-marg-left--light" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone))))));
    const AuthButton = (0, react_1.useMemo)(() => {
        if (roomstayMember) {
            return (react_1.default.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
                roomstayMember.forename,
                " ",
                roomstayMember.surname,
                react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey }))));
        }
        if (isFetchingMember) {
            return react_1.default.createElement(SmallSpinner_1.default, null);
        }
        return (react_1.default.createElement(BEButton_1.default, { size: "small", isText: true, onClick: () => {
                onLoginClickHandler();
                closeMobileMenuClickHandler();
            }, stopIconAnimation: true },
            t(Translation_1.Translation.Navigation.SignIn.SignIn),
            react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey }))));
    }, [roomstayMember, isFetchingMember]);
    const configs = (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("ul", { className: "c-header__list" },
            langKeys.length > 1 && (react_1.default.createElement("li", null,
                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: langKeys.map((lang) => {
                        return {
                            value: lang,
                            text: LanguageProvider_1.LanguageProvider.getPrettyLanguageName(lang),
                        };
                    }), value: ccx.currentLanguage, onChange: onLanguageChangeHandler, keyName: "value", labelName: "text" }))),
            react_1.default.createElement("li", null,
                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: currencyHelper.getCurrencyItems(), value: ccx.currentCurrency, onChange: onCurrencyChangeHandler, keyName: "value", labelName: "text" })),
            MemberPortalFeature_1.default.isActive() && react_1.default.createElement("li", { ref: (el) => setLoginAnchorEl(el) }, AuthButton))));
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "c-header u-print-none" },
            react_1.default.createElement("div", { className: "container" },
                react_1.default.createElement("div", { className: "u-flex" },
                    react_1.default.createElement("div", { className: "u-flex u-flex-flex-start u-flex__item" },
                        HotelGroupFeature_1.default.isActive() && react_1.default.createElement(CompanyLogo, null),
                        react_1.default.createElement(HotelLogo, null),
                        !!showHotelLinks && links),
                    react_1.default.createElement("div", { className: "u-flex mx-100" },
                        configs,
                        react_1.default.createElement("div", { className: "c-header__mobile-menu" },
                            react_1.default.createElement("span", { className: "u-white u-pad-left" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Menu, size: "26px", color: Color_1.Color.White, onClick: openMobileMenuClickHandler }))))))),
        mobileMenuOpen && (react_1.default.createElement(Portal_1.RoomstayPortal, { target: RoomstayThemeEngine_1.default.EngineContainer },
            react_1.default.createElement(Fade_1.default, { open: mobileMenuFaderStatus },
                react_1.default.createElement("div", { className: `mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}` },
                    react_1.default.createElement("div", { className: "mobile-header-menu--replica u-flex" },
                        react_1.default.createElement("div", { className: "u-flex" },
                            HotelGroupFeature_1.default.isActive() && react_1.default.createElement(CompanyLogo, { mobileMenuOpen: true }),
                            react_1.default.createElement(HotelLogo, { mobileMenuOpen: true })),
                        react_1.default.createElement("div", { className: "c-header__mobile-menu" },
                            react_1.default.createElement("span", { className: "u-white u-pad-left" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "26px", color: Color_1.Color.White, onClick: closeMobileMenuClickHandler })))),
                    react_1.default.createElement("div", { className: "mobile-header-menu--content" },
                        !!hotel && links,
                        configs))))),
        MemberPortalFeature_1.default.isActive() && (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(SmallSpinner_1.default, null) }, roomstayMember || isFetchingMember ? (react_1.default.createElement(AuthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, onCloseMenu: closeMobileMenuClickHandler, anchorEl: loginAnchorEl })) : (react_1.default.createElement(UnauthenticatedUserModal, { open: loginModalOpen, onClose: () => {
                closeLoginClickHandler();
                closeMobileMenuClickHandler();
            }, onOpenOnMobile: () => {
                onLoginClickHandler();
                openMobileMenuClickHandler();
            }, anchorEl: loginAnchorEl }))))));
}
//# sourceMappingURL=Header.js.map