"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.UserSearchSummaryRow = void 0;
const contexts_1 = require("../../../../contexts/index.js");
const hooks_1 = require("../../../../hooks/index.js");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const AutoAutoHeight_1 = __importDefault(require("../../../../animations/AutoAutoHeight"));
const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
const FloatingDatePicker_1 = __importDefault(require("../../../generic/date/FloatingDatePicker"));
const Icon_1 = __importStar(require("../../../generic/Icon/Icon"));
const Pill_1 = __importStar(require("../../../generic/Pill"));
const Text_1 = __importStar(require("../../../generic/Text"));
const Tooltip_1 = __importDefault(require("../../../generic/Tooltip/Tooltip"));
const useSearchScopeHook_1 = require("../../../../hooks/useSearchScopeHook");
const WindowSize_1 = require("../../../../hooks/WindowSize");
const Translation_1 = require("../../../../translations/Translation");
const Color_1 = require("../../../../util/Color");
const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
const StringHelper_1 = __importDefault(require("../../../../util/StringHelper"));
const BookingWizard_1 = require("../../../generic/BookingWizard/BookingWizard");
const UserSearchSummaryForm_1 = require("./UserSearchSummaryForm");
const UserSearchSummaryRow_module_scss_1 = __importDefault(require("./UserSearchSummaryRow.module.scss"));
const UserSearchSummaryRow = ({ row, index }) => {
    var _a;
    const { t } = (0, react_i18next_1.useTranslation)();
    const removeButtonRef = (0, react_1.useRef)();
    const { isAccent2ColorDark, hotel } = (0, hooks_1.useCurrentHotel)();
    const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
    const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
    const { isMobile } = (0, WindowSize_1.useWindowSize)();
    const [collapsed, setCollapsed] = (0, react_1.useState)(true);
    const isSelectedRow = (0, react_1.useMemo)(() => {
        return (selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getID()) === (row === null || row === void 0 ? void 0 : row.getID());
    }, [selectedBasketRow]);
    const canRemove = currentBasketRows.length > 1;
    const removeRoomOnClick = () => {
        DataLayer_1.default.instance.sendInteraction('Remove Room', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
        removeBasketRow(row);
    };
    const updatePeopleValues = ({ adults, children, infants, updatedPromoCode }) => {
        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);
        }
        if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {
            DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
            row.setPromoCode(updatedPromoCode);
        }
        updateBasketRow(row);
    };
    const updatePromoCode = (code) => {
        DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
        if (selectedBasketRow) {
            selectedBasketRow.setPromoCode(code);
            updateBasketRow(selectedBasketRow);
        }
    };
    const updateDateValues = (startDate, endDate) => {
        if (startDate) {
            row.setStartDate(startDate);
        }
        if (endDate) {
            row.setEndDate(endDate);
        }
        updateBasketRow(row);
    };
    const setGuest = (guests) => {
        updatePeopleValues({
            adults: guests.adults,
            children: guests.children,
            infants: guests.infants,
        });
    };
    const changePromoCode = (val) => {
        updatePromoCode(val);
    };
    const onClickCancelRoomChanges = () => {
        DataLayer_1.default.instance.sendInteraction('Cancel Room Changes', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
        selectBasketRow(null);
    };
    const onClickEditRoom = () => {
        DataLayer_1.default.instance.sendInteraction('Edit Room', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
        selectBasketRow(row);
    };
    const isValid = row.isValid();
    const isLargerThanLarge = engineContext.screenSize > ScreenSize_1.default.ExtraLarge;
    const sizeMediumDown = engineContext.screenSize <= ScreenSize_1.default.Medium;
    const shouldTextBeWhite = (isValid ? isAccent2ColorDark : false) && isSelectedRow;
    const textColor = shouldTextBeWhite ? Color_1.Color.White : undefined;
    const [guests, setGuests] = (0, react_1.useState)({
        adults: row === null || row === void 0 ? void 0 : row.getAdults(),
        children: row === null || row === void 0 ? void 0 : row.getChildren(),
        infants: row === null || row === void 0 ? void 0 : row.getInfants(),
    });
    const { getMaxSelectableAdults, showChildren, getMaxSelectableInfants, getMaxSelectableChildren } = (0, useSearchScopeHook_1.useSearchScopeHook)();
    const maxAdults = getMaxSelectableAdults({ adults: guests.adults, children: guests.children, infants: guests.infants });
    const maxChildren = getMaxSelectableChildren({ adults: guests.adults });
    const maxInfants = getMaxSelectableInfants({ adults: guests.adults });
    const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.', followElement: removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current, wrapperClasses: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove-tooltip'] },
        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove'], onClick: removeRoomOnClick, ref: removeButtonRef },
            react_1.default.createElement(BEButton_1.default, { textColor: textColor, isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !canRemove, onClick: removeRoomOnClick }))));
    const toggleButton = (react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__collapse'] },
        react_1.default.createElement(BEButton_1.default, { isText: true, icon: collapsed ? Icon_1.IconType.ArrowDown3 : Icon_1.IconType.ArrowUp3, iconPosition: "right", stopIconAnimation: true, onClick: () => {
                setCollapsed((prev) => !prev);
            } })));
    const bookingWizardContext = {
        layout: 'booking-summary',
        theme: BookingWizard_1.EBookingWizardTheme.Default,
        type: sizeMediumDown ? 'top-sheet' : 'popup',
        isImagesTheme: false,
        isImagesThemeMobile: false,
        activeSection: null,
        onNextHandler: (currentSection) => { },
        onPrevHandler: (currentSection) => { },
        stateSections: BookingWizard_1.StateSectionsDefault,
    };
    if (isValid && !isSelectedRow) {
        return (react_1.default.createElement("div", { className: `${UserSearchSummaryRow_module_scss_1.default['user-completed-summary-row']} u-flex w-100` },
            react_1.default.createElement("div", { className: "u-flex justify-content-start" },
                react_1.default.createElement("div", { className: "u-flex flex-column" },
                    react_1.default.createElement("span", null,
                        react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge },
                            react_1.default.createElement("strong", null, row.getRoom().name)),
                        react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge, type: isLargerThanLarge ? Text_1.TextType.Body : Text_1.TextType.Small },
                            react_1.default.createElement("span", { className: "u-marg-left--light@xl" },
                                StringHelper_1.default.pluralWithDictAndCount(row.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
                                showChildren ? (react_1.default.createElement(react_1.default.Fragment, null,
                                    ",\u00A0",
                                    StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t))) : null,
                                ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _a === void 0 ? void 0 : _a.supportInfants) ? (react_1.default.createElement(react_1.default.Fragment, null,
                                    ",\u00A0",
                                    StringHelper_1.default.pluralWithDictAndCount(row.getInfants(), Translation_1.Translation.Step.Date.Infant, t))) : null))),
                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey },
                        react_1.default.createElement("strong", null, row.getStayDateRange('ddd, MMM D, YYYY', ' -')))),
                row.isPromoCodeValid() && (react_1.default.createElement("div", { className: "u-marg-left d-flex align-items-center" },
                    react_1.default.createElement(Pill_1.default, { type: Pill_1.PillType.Success, icon: Icon_1.IconType.Money }, row.getPromoCode())))),
            react_1.default.createElement("div", { className: "u-flex align-items-center" },
                react_1.default.createElement("div", { className: "u-flex align-items-center room-builder-progress--edit" },
                    react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Room.EditThisRoom) },
                        react_1.default.createElement("div", { className: "u-flex align-items-center" },
                            react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickEditRoom }, t(Translation_1.Translation.Misc.Edit).toUpperCase())))),
                removeButton)));
    }
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(UserSearchSummaryRow_module_scss_1.default['user-search-summary-row'], {
            [UserSearchSummaryRow_module_scss_1.default['--selected']]: isSelectedRow,
            [UserSearchSummaryRow_module_scss_1.default['--valid']]: isValid,
            [UserSearchSummaryRow_module_scss_1.default['--has-dark-bg']]: shouldTextBeWhite,
        }) },
        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--inner'] },
            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
                react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), endDate: row.getEndDate(), selectedDateChanged: updateDateValues, isAboveNav: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
                    react_1.default.createElement(Tooltip_1.default, { disabled: !isSelectedRow, title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere) },
                        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("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range'] },
                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--item'] },
                                    react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.CheckIn)),
                                    react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate())),
                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--icon'] },
                                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, color: shouldTextBeWhite ? Color_1.Color.White : undefined })),
                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--item'] },
                                    react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.CheckOut)),
                                    react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))))),
            isMobile ? (react_1.default.createElement("div", { className: "w-100" },
                react_1.default.createElement(AutoAutoHeight_1.default, { open: !collapsed },
                    react_1.default.createElement("div", { className: "w-100 u-flex flex-column" },
                        react_1.default.createElement(UserSearchSummaryForm_1.UserSearchSummaryForm, { row: row, hotel: hotel, isSelectedRow: isSelectedRow, bookingWizardContext: bookingWizardContext, maxAdults: maxAdults, maxChildren: maxChildren, maxInfants: maxInfants, showChildren: showChildren, setGuest: setGuest, setGuests: setGuests, changePromoCode: changePromoCode, textColor: textColor }))))) : (react_1.default.createElement(UserSearchSummaryForm_1.UserSearchSummaryForm, { row: row, hotel: hotel, isSelectedRow: isSelectedRow, bookingWizardContext: bookingWizardContext, maxAdults: maxAdults, maxChildren: maxChildren, maxInfants: maxInfants, showChildren: showChildren, setGuest: setGuest, setGuests: setGuests, changePromoCode: changePromoCode, textColor: textColor }))),
        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--buttons'] }, isSelectedRow && isValid ? (react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges, textColor: textColor }, t(Translation_1.Translation.Misc.Cancel))) : (react_1.default.createElement("div", null,
            !!isMobile && toggleButton,
            removeButton)))));
};
exports.UserSearchSummaryRow = UserSearchSummaryRow;
//# sourceMappingURL=UserSearchSummaryRow.js.map