"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 classnames_1 = __importDefault(require("classnames"));
const dayjs_1 = __importDefault(require("dayjs"));
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 LineBreak_1 = __importDefault(require("../../../components/generic/LineBreak"));
const Select_1 = require("../../../components/generic/Select/Select");
const Text_1 = __importStar(require("../../../components/generic/Text"));
const HotelCardList_1 = __importDefault(require("../../../components/steps/hotel/HotelCardList"));
const HotelSearchParameters_1 = __importDefault(require("../../../components/steps/hotel/HotelSearchParameters"));
const EventHook_1 = require("../../../hooks/EventHook");
const Color_1 = require("../../../util/Color");
const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
var SortByOptions;
(function (SortByOptions) {
    SortByOptions["Recommended"] = "R";
    SortByOptions["LowestPrice"] = "L";
    SortByOptions["HighestPrice"] = "H";
})(SortByOptions || (SortByOptions = {}));
const StepHotelComponent = () => {
    var _a, _b, _c;
    const { t } = (0, react_i18next_1.useTranslation)();
    const sortByValues = [
        { value: SortByOptions.Recommended, text: t(Translation_1.Translation.Step.Room.Sort.Recommended) },
        { value: SortByOptions.LowestPrice, text: t(Translation_1.Translation.Step.Room.Sort.LowestPrice) },
        { value: SortByOptions.HighestPrice, text: t(Translation_1.Translation.Step.Room.Sort.HighestPrice) },
    ];
    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
    const fullPageContext = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
    const [sortBy, setSortBy] = (0, react_1.useState)(sortByValues[0].value);
    const [city, setCity] = (0, react_1.useState)((_a = fullPageContext.urlParameters.defaultCity) !== null && _a !== void 0 ? _a : 'All');
    const [cityOptions, setCityOptions] = (0, react_1.useState)([]);
    const [sortedHotels, setSortedHotels] = (0, react_1.useState)();
    const basketRow = (_b = basketContext.selectedBasketRow) !== null && _b !== void 0 ? _b : basketContext.currentBasketRows[0];
    const { raise } = (0, EventHook_1.useEvent)();
    (0, react_1.useEffect)(() => {
        const event = new events_1.StepHotelViewEvent();
        raise(event);
    }, []);
    (0, react_1.useEffect)(() => {
        const hotelsToShow = ccx.hotels.filter((hotel) => {
            var _a;
            if (((_a = hotel.address) === null || _a === void 0 ? void 0 : _a.city) === city) {
                return hotel;
            }
            else if (city === 'All') {
                return hotel;
            }
        });
        if (sortBy === SortByOptions.Recommended) {
            setSortedHotels(hotelsToShow);
        }
        else {
            setSortedHotels([...hotelsToShow].sort((a, b) => {
                var _a, _b, _c, _d;
                switch (sortBy) {
                    case SortByOptions.LowestPrice:
                        return ((_a = a.lowestPrice) === null || _a === void 0 ? void 0 : _a.value) - ((_b = b.lowestPrice) === null || _b === void 0 ? void 0 : _b.value);
                    case SortByOptions.HighestPrice:
                        return ((_c = b.lowestPrice) === null || _c === void 0 ? void 0 : _c.value) - ((_d = a.lowestPrice) === null || _d === void 0 ? void 0 : _d.value);
                }
            }));
        }
    }, [ccx.hotels, sortBy, city]);
    (0, react_1.useEffect)(() => {
        const cities = {};
        ccx.hotels.forEach((hotel) => {
            // We must wait till address is loaded
            if (hotel.address) {
                cities[hotel.address.city] = { value: hotel.address.city, text: hotel.address.city };
            }
        });
        setCityOptions([{ value: 'All', text: 'All' }, ...Object.values(cities)]);
    }, [ccx.hotels]);
    (0, react_1.useEffect)(() => {
        ccx.updateLowestPricePerNightByHotelIds(ccx.hotels.map(({ hotelID }) => hotelID), basketRow);
    }, [basketRow === null || basketRow === void 0 ? void 0 : basketRow.getStartDate(), basketRow === null || basketRow === void 0 ? void 0 : basketRow.getEndDate(), basketRow === null || basketRow === void 0 ? void 0 : basketRow.getAdults(), basketRow === null || basketRow === void 0 ? void 0 : basketRow.getChildren(), basketRow === null || basketRow === void 0 ? void 0 : basketRow.getInfants(), basketRow === null || basketRow === void 0 ? void 0 : basketRow.getPromoCode()]);
    const changeCountry = (selected) => {
        setCity(selected);
    };
    const changeFilter = (selected) => {
        setSortBy(selected);
    };
    const clearFilters = () => {
        var _a;
        setCity((_a = cityOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
        setSortBy(sortByValues[0].value);
    };
    (0, react_1.useEffect)(() => {
        const startDate = basketRow.getStartDate();
        const endDate = basketRow.getEndDate();
        if (!startDate || !endDate) {
            if (startDate) {
                basketRow.setEndDate(startDate.add(1, 'day'));
            }
            else {
                basketRow.setStartDate((0, dayjs_1.default)().add(1, 'day'));
                basketRow.setEndDate((0, dayjs_1.default)().add(2, 'day'));
            }
            basketContext.updateBasketRow(basketRow);
        }
    }, []);
    return (react_1.default.createElement("div", { className: "container rs-step-hotel" },
        react_1.default.createElement("div", { className: 'row' + (context.screenSize > ScreenSize_1.default.ExtraLarge ? ' no-gutters' : '') },
            react_1.default.createElement("div", { className: "col-md-8" },
                react_1.default.createElement("div", { className: "row align-items-end" },
                    react_1.default.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
                            react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Room.SortBy))),
                        react_1.default.createElement("div", null,
                            react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: sortByValues, value: sortBy, onChange: changeFilter, keyName: "value", labelName: "text" }))),
                    react_1.default.createElement("div", { className: "col-6 col-md-2 col-lg-2" },
                        react_1.default.createElement("div", null,
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Hotel.Cities))),
                            react_1.default.createElement("div", { className: "filter-button d-flex align-items-center u-cursor-pointer" },
                                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: cityOptions, value: city, onChange: changeCountry, keyName: "value", labelName: "text" })))),
                    react_1.default.createElement("div", { className: (0, classnames_1.default)('col-sm-12 col-md-2 col-lg-1 u-flex u-flex-flex-end', {
                            'u-marg-top--light': context.screenSize <= ScreenSize_1.default.Medium,
                        }) },
                        react_1.default.createElement(BEButton_1.default, { rounded: true, size: "tiny", onClick: clearFilters, disabled: city === ((_c = cityOptions[0]) === null || _c === void 0 ? void 0 : _c.value) && sortBy === sortByValues[0].value }, t(Translation_1.Translation.Misc.ClearAll)))))),
        react_1.default.createElement(LineBreak_1.default, null),
        react_1.default.createElement(HotelSearchParameters_1.default, null),
        react_1.default.createElement(HotelCardList_1.default, { hotelList: sortedHotels })));
};
exports.default = StepHotelComponent;
//# sourceMappingURL=StepHotelComponent.js.map