"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccountReservationPage = void 0;
const hooks_1 = require("../../../hooks/index.js");
const react_1 = __importDefault(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 BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
const Icon_1 = require("../../../components/generic/Icon/Icon");
const Tab_1 = require("../../../components/generic/Tabs/Tab");
const Tabs_1 = __importDefault(require("../../../components/generic/Tabs/Tabs"));
const ReservationItem_1 = require("../../../components/reservation/ReservationItem");
const ReservationList_1 = __importDefault(require("../../../components/reservation/ReservationList"));
const AccountRoutes_1 = require("../AccountRoutes");
const AccountReservationPage = () => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const { cancelledBookings, upcomingBookings, pastBookings } = (0, hooks_1.useMember)();
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy" },
            react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Home.path },
                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.Reservation.BackToYourAccount)))),
        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, t(Translation_1.Translation.Reservation.YourReservationPage.Title))),
        react_1.default.createElement(Tabs_1.default, { defaultActiveKey: AccountRoutes_1.EReservationStatusNavPath.UpcomingStays },
            react_1.default.createElement(Tab_1.Tab, { navPath: AccountRoutes_1.EReservationStatusNavPath.UpcomingStays, title: t(Translation_1.Translation.Reservation.YourReservationPage.UpcomingStays) },
                react_1.default.createElement("div", { className: "u-pad-top--heavy u-marg-bottom--heavy" },
                    react_1.default.createElement(ReservationList_1.default, { reservationItems: upcomingBookings, navPath: AccountRoutes_1.EReservationStatusNavPath.UpcomingStays }))),
            react_1.default.createElement(Tab_1.Tab, { navPath: AccountRoutes_1.EReservationStatusNavPath.PastStays, title: t(Translation_1.Translation.Reservation.YourReservationPage.PastStays) },
                react_1.default.createElement("div", { className: "u-pad-top--heavy u-marg-bottom--heavy" },
                    react_1.default.createElement(ReservationList_1.default, { reservationItems: pastBookings, actions: [ReservationItem_1.ReservationAction.MoreDetails, ReservationItem_1.ReservationAction.BookAgain], navPath: AccountRoutes_1.EReservationStatusNavPath.PastStays }))),
            react_1.default.createElement(Tab_1.Tab, { navPath: AccountRoutes_1.EReservationStatusNavPath.CancelledStays, title: t(Translation_1.Translation.Reservation.YourReservationPage.CancelledStays) },
                react_1.default.createElement("div", { className: "u-pad-top--heavy u-marg-bottom--heavy" },
                    react_1.default.createElement(ReservationList_1.default, { isCancelled: true, reservationItems: cancelledBookings, actions: [ReservationItem_1.ReservationAction.MoreDetails, ReservationItem_1.ReservationAction.BookAgain], navPath: AccountRoutes_1.EReservationStatusNavPath.CancelledStays }))))));
};
exports.AccountReservationPage = AccountReservationPage;
//# sourceMappingURL=AccountReservationsPage.js.map