"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.StateSectionsDefault = exports.EBookingWizardSection = exports.EBookingWizardOverlayDirection = exports.EBookingWizardTheme = void 0;
const classnames_1 = __importDefault(require("classnames"));
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const react_use_measure_1 = __importDefault(require("react-use-measure"));
const BEButton_1 = __importDefault(require("../BEButton"));
const BookingWizardContent_1 = require("./BookingWizardContent");
const BookingWizardContext_1 = require("./BookingWizardContext");
const Icon_1 = __importStar(require("../Icon/Icon"));
const SimpleModal_1 = __importStar(require("../modal/SimpleModal"));
const WindowSize_1 = require("../../../hooks/WindowSize");
const Translation_1 = require("../../../translations/Translation");
const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
const BookingWizard_module_scss_1 = __importDefault(require("./BookingWizard.module.scss"));
var EBookingWizardTheme;
(function (EBookingWizardTheme) {
    EBookingWizardTheme["Default"] = "default";
    EBookingWizardTheme["Specific"] = "specific";
    EBookingWizardTheme["Images"] = "images";
})(EBookingWizardTheme || (exports.EBookingWizardTheme = EBookingWizardTheme = {}));
var EBookingWizardOverlayDirection;
(function (EBookingWizardOverlayDirection) {
    EBookingWizardOverlayDirection["Upward"] = "upward";
    EBookingWizardOverlayDirection["Downward"] = "downward";
})(EBookingWizardOverlayDirection || (exports.EBookingWizardOverlayDirection = EBookingWizardOverlayDirection = {}));
var EBookingWizardSection;
(function (EBookingWizardSection) {
    EBookingWizardSection["Property"] = "property";
    EBookingWizardSection["Date"] = "date";
    EBookingWizardSection["Guest"] = "guest";
    EBookingWizardSection["Promo"] = "promo";
})(EBookingWizardSection || (exports.EBookingWizardSection = EBookingWizardSection = {}));
exports.StateSectionsDefault = {
    [EBookingWizardSection.Property]: { opening: false, isFirst: false, hidden: false, inactive: false },
    [EBookingWizardSection.Date]: { opening: false, isFirst: false, hidden: false, inactive: false },
    [EBookingWizardSection.Guest]: { opening: false, isFirst: false, hidden: false, inactive: false },
    [EBookingWizardSection.Promo]: { opening: false, isFirst: false, hidden: false, inactive: false },
};
const BookingWizard = (props) => {
    const { layout: propLayout = 'horizontal', theme = EBookingWizardTheme.Default, useMobileButtonLayout = false, onSubmit, wrapperClassname, contentClassname: contentClassnameProps, selectedProperty, properties, defaultColors, maxAdults, disableChild, showInfants, disableRoom, hideGuestSelect, hidePromocode, hideProperty, defaultValues, overlayDirection = EBookingWizardOverlayDirection.Downward, startsWeekOnDay, } = props;
    const [isOpen, setIsOpen] = react_1.default.useState(false);
    const { isMobile } = (0, WindowSize_1.useWindowSize)();
    const { t } = (0, react_i18next_1.useTranslation)();
    const [ref, bounds] = (0, react_use_measure_1.default)({ debounce: 300 });
    const layout = (0, react_1.useMemo)(() => {
        if (isMobile && useMobileButtonLayout) {
            return 'button';
        }
        return propLayout;
    }, [isMobile, useMobileButtonLayout, propLayout]);
    const [compOverlayType, setCompOverlayType] = (0, react_1.useState)('popup');
    const [overlayOffset, setOverlayOffset] = (0, react_1.useState)();
    const [dateSelectorOverlayOffset, setDateSelectorOverlayOffset] = (0, react_1.useState)();
    const [overlayPlacement, setOverlayPlacement] = (0, react_1.useState)();
    const isSmallContainer = (0, react_1.useMemo)(() => {
        if (!bounds.width)
            return false;
        return bounds.width <= ScreenSize_1.default.Medium;
    }, [bounds]);
    (0, react_1.useEffect)(() => {
        if ((layout === 'horizontal' || layout === 'horizontal-condensed') && !isMobile) {
            setOverlayOffset([0, 6]);
            setDateSelectorOverlayOffset([0, 6]);
            setCompOverlayType('popup');
        }
        else {
            setOverlayOffset([0, 10]);
            setDateSelectorOverlayOffset([0, -8]);
            setCompOverlayType('bottom-sheet');
        }
    }, [layout, isMobile, isSmallContainer]);
    (0, react_1.useEffect)(() => {
        if (!isMobile) {
            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom-start' : 'top-start');
        }
        else {
            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom' : 'top');
        }
    }, [isMobile]);
    const isImagesTheme = theme === EBookingWizardTheme.Images;
    const classes = (0, classnames_1.default)(BookingWizard_module_scss_1.default.container, {
        [BookingWizard_module_scss_1.default['--theme-specific']]: theme === EBookingWizardTheme.Specific,
        [BookingWizard_module_scss_1.default['--theme-default']]: theme === EBookingWizardTheme.Default,
        [BookingWizard_module_scss_1.default['--theme-images']]: isImagesTheme,
        [BookingWizard_module_scss_1.default['--theme-condensed']]: layout === 'horizontal-condensed',
        [BookingWizard_module_scss_1.default['--in-small-container']]: isSmallContainer,
    }, wrapperClassname);
    const contentClassname = (0, classnames_1.default)(contentClassnameProps, { [BookingWizard_module_scss_1.default['--in-small-container']]: isSmallContainer });
    const isImagesThemeMobile = isImagesTheme && isSmallContainer;
    const [activeSection, setActiveSection] = (0, react_1.useState)(null);
    const [availableSections, setAvailableSections] = (0, react_1.useState)([]);
    const [stateSections, setStateSections] = (0, react_1.useState)(exports.StateSectionsDefault);
    (0, react_1.useEffect)(() => {
        const isPromoHidden = hidePromocode || layout === 'horizontal-condensed' || isImagesThemeMobile;
        const isPropertyHidden = !!hideProperty;
        const isGuestHidden = !!hideGuestSelect;
        const state = {
            [EBookingWizardSection.Property]: {
                hidden: isPropertyHidden,
                isFirst: !isPropertyHidden,
                opening: EBookingWizardSection.Property === activeSection,
                inactive: isPropertyHidden || (isImagesThemeMobile && activeSection !== null && activeSection !== EBookingWizardSection.Property),
            },
            [EBookingWizardSection.Date]: {
                hidden: false,
                isFirst: isPropertyHidden,
                opening: EBookingWizardSection.Date === activeSection,
                inactive: (isImagesThemeMobile && isPropertyHidden && activeSection === null) || (isImagesThemeMobile && activeSection !== EBookingWizardSection.Date),
            },
            [EBookingWizardSection.Guest]: {
                hidden: isGuestHidden,
                isFirst: false,
                opening: EBookingWizardSection.Guest === activeSection,
                inactive: isGuestHidden || (isImagesThemeMobile && activeSection !== EBookingWizardSection.Guest),
            },
            [EBookingWizardSection.Promo]: {
                hidden: isPromoHidden,
                isFirst: false,
                opening: EBookingWizardSection.Promo === activeSection,
                inactive: isPromoHidden || (isImagesThemeMobile && activeSection !== EBookingWizardSection.Promo),
            },
        };
        // Extract available (i.e., not hidden) sections from state
        const enabled = Object.entries(state)
            .filter(([, value]) => !value.hidden)
            .map(([key]) => key);
        setAvailableSections(enabled);
        // If all inactive are true, then find the first section with hidden === false and set its inactive to false.
        const allInactive = Object.values(state).every((s) => s.inactive);
        if (allInactive) {
            const sections = [EBookingWizardSection.Property, EBookingWizardSection.Date, EBookingWizardSection.Guest, EBookingWizardSection.Promo];
            for (const section of sections) {
                if (!state[section].hidden) {
                    state[section].opening = false;
                    state[section].inactive = false;
                    break;
                }
            }
        }
        setStateSections(state);
    }, [layout, hideProperty, hideGuestSelect, hidePromocode, activeSection, isImagesTheme, isImagesThemeMobile]);
    const navigateSection = (currentSection, direction) => {
        var _a;
        if (!currentSection)
            return;
        const currentIndex = availableSections.indexOf(currentSection);
        const targetSection = (_a = availableSections[currentIndex + direction]) !== null && _a !== void 0 ? _a : null;
        setActiveSection(targetSection);
    };
    const onNextHandler = (section) => navigateSection(section, 1);
    const onPrevHandler = (section) => navigateSection(section, -1);
    const bookingWizardContext = {
        layout,
        theme,
        type: compOverlayType,
        className: classes,
        isMobile,
        isSmallContainer,
        onSubmit,
        overlay: {
            offset: overlayOffset,
            placement: overlayPlacement,
            fallbackPlacements: overlayPlacement,
            dateOffset: dateSelectorOverlayOffset,
        },
        isImagesTheme,
        isImagesThemeMobile,
        activeSection,
        stateSections,
        onNextHandler,
        onPrevHandler,
        startsWeekOnDay,
    };
    if (layout === 'button') {
        return (react_1.default.createElement("div", { className: classes },
            react_1.default.createElement(BEButton_1.default, { className: BookingWizard_module_scss_1.default.bookNowBtn, onClick: () => setIsOpen(true) }, t(Translation_1.Translation.Misc.BookNow)),
            react_1.default.createElement(SimpleModal_1.default, { className: BookingWizard_module_scss_1.default.container, size: SimpleModal_1.SimpleModalSize.ExtraSmall, open: isOpen, onClose: () => setIsOpen(false), alignCenter: true, overflowVisible: true },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.title },
                        react_1.default.createElement("span", null, t(Translation_1.Translation.Misc.BookAHotel)),
                        react_1.default.createElement(Icon_1.default, { className: BookingWizard_module_scss_1.default.closeBtn, icon: Icon_1.IconType.Close, size: "24px", onClick: () => setIsOpen(false) })),
                    react_1.default.createElement(BookingWizardContext_1.BookingWizardContext.Provider, { value: bookingWizardContext },
                        react_1.default.createElement("div", { className: classes },
                            react_1.default.createElement(BookingWizardContent_1.BookingWizardContent, { properties: properties, selectedProperty: selectedProperty, defaultColors: defaultColors, classname: contentClassname, maxAdults: maxAdults, disableChild: disableChild, showInfants: showInfants, disableRoom: disableRoom, defaultValues: defaultValues, hideGuestSelect: hideGuestSelect, hidePromocode: hidePromocode, hideProperty: hideProperty })))))));
    }
    return (react_1.default.createElement("div", { ref: ref, className: classes },
        react_1.default.createElement(BookingWizardContext_1.BookingWizardContext.Provider, { value: bookingWizardContext },
            react_1.default.createElement(BookingWizardContent_1.BookingWizardContent, Object.assign({}, props, { classname: contentClassname, disableChild: disableChild, disableRoom: disableRoom, defaultValues: defaultValues })))));
};
exports.default = BookingWizard;
//# sourceMappingURL=BookingWizard.js.map