"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.BookingWizardDateSelector = void 0;
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 AutoAutoHeight_1 = __importDefault(require("../../../../animations/AutoAutoHeight"));
const BEButton_1 = __importDefault(require("../../BEButton"));
const DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
const Text_1 = __importDefault(require("../../Text"));
const Translation_1 = require("../../../../translations/Translation");
const FloatingDateRangePicker_1 = __importDefault(require("../../DateRangePicker/FloatingDateRangePicker"));
const BookingWizard_1 = require("../BookingWizard");
const BookingWizard_module_scss_1 = __importDefault(require("../BookingWizard.module.scss"));
const BookingWizardBottomSheet_1 = __importStar(require("../BookingWizardBottomSheet/BookingWizardBottomSheet"));
const BookingWizardContent_1 = require("../BookingWizardContent");
const BookingWizardContext_1 = require("../BookingWizardContext");
const BookingWizardDateSelector_module_scss_1 = __importDefault(require("./BookingWizardDateSelector.module.scss"));
const BookingWizardDateSelector = (props) => {
    const { defaultStartDate, defaultEndDate, dateFormat = 'MMM DD', showYearOnCalendar, yearDisplayOption, divider = true, hidden, inactive } = props;
    if (hidden)
        return null;
    const { overlay, theme, layout, type: overlayType, isMobile, isSmallContainer, stateSections, onPrevHandler, onNextHandler, isImagesTheme, isImagesThemeMobile, } = (0, BookingWizardContext_1.useBookingWizard)();
    const { t } = (0, react_i18next_1.useTranslation)();
    const checkOutDatePickerRef = react_1.default.useRef(null);
    //With isImagesTheme, default both startDate and endDate are null
    const [startDate, setStartDate] = (0, react_1.useState)(defaultStartDate !== null && defaultStartDate !== void 0 ? defaultStartDate : (isImagesTheme ? null : (0, dayjs_1.default)()));
    const [endDate, setEndDate] = (0, react_1.useState)(defaultEndDate !== null && defaultEndDate !== void 0 ? defaultEndDate : (isImagesTheme ? null : (0, dayjs_1.default)().add(1, 'days')));
    const [selectingStartDate, setSelectingStartDate] = (0, react_1.useState)(startDate);
    const [selectingEndDate, setSelectingEndDate] = (0, react_1.useState)(endDate);
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    const [isOverlayOpen, setIsOverlayOpen] = (0, react_1.useState)(false);
    const [checkInWrapperRef, setCheckInWrapperRef] = react_1.default.useState();
    const [monthCount, setMonthCount] = (0, react_1.useState)(2);
    (0, react_1.useEffect)(() => {
        const opening = stateSections[BookingWizard_1.EBookingWizardSection.Date].opening;
        setIsOpen(opening);
    }, [stateSections]);
    let RowWrapper = react_1.default.Fragment;
    const rowWrapperProps = {};
    if (layout === 'button' || isMobile || isSmallContainer) {
        RowWrapper = 'div';
        rowWrapperProps.className = (0, classnames_1.default)(BookingWizard_module_scss_1.default.itemGroup, {
            [BookingWizard_module_scss_1.default['inactive']]: inactive,
        });
        rowWrapperProps.ref = (ref) => {
            if (layout === 'button') {
                setCheckInWrapperRef(ref);
            }
        };
    }
    const setDate = (startDate, endDate) => {
        var _a;
        setStartDate(startDate);
        setEndDate(endDate);
        if (!isImagesThemeMobile) {
            setIsOpen(false);
        }
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, startDate, endDate);
    };
    const _onCheckoutDateChange = (newEndDate) => {
        var _a;
        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, startDate, newEndDate);
        setEndDate(newEndDate);
        if (newEndDate) {
            if (!isImagesThemeMobile) {
                setIsOpen(false);
            }
        }
    };
    const _toggleInlineDatePicker = () => {
        var _a;
        (_a = checkOutDatePickerRef === null || checkOutDatePickerRef === void 0 ? void 0 : checkOutDatePickerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
        setIsOpen(!isOpen);
    };
    const onOverlayOpenChange = (isOpen) => {
        setIsOverlayOpen(isOpen);
    };
    const ClearButton = ({ date, onClick }) => {
        return isImagesTheme ? react_1.default.createElement(BookingWizardContent_1.BWClearButton, { show: isOverlayOpen && !!date, onClick: onClick }) : react_1.default.createElement(react_1.default.Fragment, null);
    };
    const onApply = () => {
        setDate(selectingStartDate, selectingEndDate);
    };
    const _checkInDate = (date, disabledClass) => {
        const defaultPlaceHolder = isImagesTheme ? t(Translation_1.Translation.Misc.CheckInPlaceHolder) : '-';
        return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
                [BookingWizard_module_scss_1.default.item]: !disabledClass,
                [BookingWizard_module_scss_1.default['item-fullwidth']]: isImagesTheme,
            }), onClick: _toggleInlineDatePicker },
            react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default['item-with-icon'] },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("label", { className: BookingWizard_module_scss_1.default.label }, t(Translation_1.Translation.Misc.CheckIn)),
                    layout === 'horizontal-condensed' ? (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizardDateSelector_module_scss_1.default['line-1'], BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format('DD')) || defaultPlaceHolder),
                        react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizardDateSelector_module_scss_1.default['line-2'], BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format('MMM')) || defaultPlaceHolder))) : (react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format(dateFormat)) || defaultPlaceHolder))),
                react_1.default.createElement(ClearButton, { date: date, onClick: () => {
                        setDate(null, endDate);
                    } }))));
    };
    const _checkOutDate = (date) => {
        const defaultPlaceHolder = isImagesTheme ? t(Translation_1.Translation.Misc.CheckOutPlaceHolder) : '-';
        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizard_module_scss_1.default.item, {
                [BookingWizard_module_scss_1.default['active']]: isOverlayOpen && !!startDate && !endDate,
            }), onClick: _toggleInlineDatePicker },
            react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizard_module_scss_1.default['item-with-icon']) },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("label", { className: BookingWizard_module_scss_1.default.label }, t(Translation_1.Translation.Misc.CheckOut)),
                    layout === 'horizontal-condensed' ? (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizardDateSelector_module_scss_1.default['line-1'], BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format('DD')) || defaultPlaceHolder),
                        react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizardDateSelector_module_scss_1.default['line-2'], BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format('MMM')) || defaultPlaceHolder))) : (react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.date, BookingWizard_module_scss_1.default.value), bold: true }, (date === null || date === void 0 ? void 0 : date.format(dateFormat)) || defaultPlaceHolder))),
                react_1.default.createElement(ClearButton, { date: date, onClick: () => {
                        setDate(startDate, null);
                    } }))));
    };
    const _combineDates = (checkIn, checkOut) => {
        return (react_1.default.createElement("div", { onClick: _toggleInlineDatePicker },
            react_1.default.createElement("label", { className: BookingWizard_module_scss_1.default.label }, t(Translation_1.Translation.Misc.Dates)),
            react_1.default.createElement(Text_1.default, { className: BookingWizardDateSelector_module_scss_1.default.date, bold: true }, `${(checkIn === null || checkIn === void 0 ? void 0 : checkIn.format(dateFormat)) || ''} - ${(checkOut === null || checkOut === void 0 ? void 0 : checkOut.format(dateFormat)) || ''}`)));
    };
    const showMultipleMonths = layout === 'horizontal' && !isMobile;
    if (overlayType === 'inline') {
        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.container, { [BookingWizardDateSelector_module_scss_1.default['--open']]: isOpen }) },
            react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
                _checkInDate(startDate),
                react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider }),
                _checkOutDate(endDate)),
            react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['inline-container'] },
                react_1.default.createElement(AutoAutoHeight_1.default, { open: isOpen },
                    react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['inline-box'] },
                        react_1.default.createElement(DateRangePicker_1.default, { selectedStartDate: startDate, selectedEndDate: endDate, onStartDateChanged: setStartDate, onEndDateChanged: _onCheckoutDateChange, theme: layout === 'horizontal-condensed' ? BookingWizard_1.EBookingWizardTheme.Specific : theme, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption }))))));
    }
    if (overlayType === 'bottom-sheet') {
        const DateRangePickerFooter = () => {
            if (isImagesTheme) {
                return (react_1.default.createElement(BEButton_1.default, { stopIconAnimation: true, outline: true, rounded: true, wide: true, onClick: () => {
                        setMonthCount((prev) => prev + 4);
                    } }, t(Translation_1.Translation.Misc.LoadMoreDates)));
            }
            else {
                return (react_1.default.createElement(BEButton_1.default, { wide: true, primary: true, filled: true, onClick: onApply }, t(Translation_1.Translation.Misc.Apply)));
            }
        };
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps), !isMobile && layout === 'horizontal' ? (react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.item }, _combineDates(startDate, endDate))) : (react_1.default.createElement(react_1.default.Fragment, null,
                _checkInDate(startDate),
                react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider }),
                _checkOutDate(endDate)))),
            react_1.default.createElement(BookingWizardBottomSheet_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.container, BookingWizardDateSelector_module_scss_1.default['bottom-sheet-container'], {
                    [BookingWizardDateSelector_module_scss_1.default['custom-overlay-images-theme']]: isImagesTheme,
                }), open: isOpen, onDismiss: () => {
                    if (!isImagesThemeMobile) {
                        setIsOpen(false);
                    }
                }, header: react_1.default.createElement(BookingWizardBottomSheet_1.BWBottomSheetHeader, { title: t(Translation_1.Translation.Misc.ChooseDates), onClose: () => setIsOpen(false) }), footer: react_1.default.createElement(BookingWizardBottomSheet_1.BWBottomSheetFooter, { hidePrev: stateSections[BookingWizard_1.EBookingWizardSection.Date].isFirst, onPrev: () => onPrevHandler(BookingWizard_1.EBookingWizardSection.Date), onNext: () => onNextHandler(BookingWizard_1.EBookingWizardSection.Date), disabledNext: !startDate || !endDate }) },
                react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['bottom-sheet-container-box'] },
                    react_1.default.createElement(DateRangePicker_1.default, { selectedStartDate: startDate, selectedEndDate: endDate, onStartDateChanged: (date) => {
                            setSelectingStartDate(date);
                            if (isImagesThemeMobile) {
                                setStartDate(date);
                            }
                        }, onEndDateChanged: (date) => {
                            setSelectingEndDate(date);
                            if (isImagesThemeMobile) {
                                _onCheckoutDateChange(date);
                            }
                        }, theme: theme, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption, className: BookingWizardDateSelector_module_scss_1.default['bottom-sheet-container-box-calendar'], showMultipleMonths: isImagesTheme, showArrows: theme !== BookingWizard_1.EBookingWizardTheme.Images, monthCount: monthCount }),
                    react_1.default.createElement(DateRangePickerFooter, null)))));
    }
    if (layout === 'horizontal' && theme === BookingWizard_1.EBookingWizardTheme.Specific && !isMobile && !isSmallContainer) {
        return (react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
            react_1.default.createElement(FloatingDateRangePicker_1.default, { ref: checkOutDatePickerRef, container: checkInWrapperRef, startDate: startDate, endDate: endDate, selectedDateChanged: setDate, overlayOffset: overlay === null || overlay === void 0 ? void 0 : overlay.dateOffset, className: BookingWizard_module_scss_1.default.item, theme: theme, showMultipleMonths: showMultipleMonths, overlay: {
                    placement: overlay === null || overlay === void 0 ? void 0 : overlay.placement,
                    fallbackPlacements: overlay === null || overlay === void 0 ? void 0 : overlay.fallbackPlacements,
                }, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption }, _combineDates(startDate, endDate))));
    }
    const DateNotes = () => {
        return (props === null || props === void 0 ? void 0 : props.notes) && isImagesTheme ? react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.notes }, props === null || props === void 0 ? void 0 : props.notes) : null;
    };
    return (react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
        react_1.default.createElement(FloatingDateRangePicker_1.default, { ref: checkOutDatePickerRef, container: checkInWrapperRef, startDate: startDate, endDate: endDate, selectedDateChanged: setDate, overlayOffset: overlay === null || overlay === void 0 ? void 0 : overlay.dateOffset, theme: layout === 'horizontal-condensed' ? BookingWizard_1.EBookingWizardTheme.Specific : theme, showMultipleMonths: showMultipleMonths, className: (0, classnames_1.default)(BookingWizard_module_scss_1.default.item, {
                [BookingWizard_module_scss_1.default['active']]: isOverlayOpen && !!endDate,
            }), overlay: {
                placement: overlay === null || overlay === void 0 ? void 0 : overlay.placement,
                fallbackPlacements: overlay === null || overlay === void 0 ? void 0 : overlay.fallbackPlacements,
            }, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption, notes: react_1.default.createElement(DateNotes, null), onOverlayOpenChange: onOverlayOpenChange }, _checkInDate(startDate, true)),
        react_1.default.createElement("div", { className: layout !== 'button' && !isMobile ? BookingWizard_module_scss_1.default.divider : '' }),
        _checkOutDate(endDate)));
};
exports.BookingWizardDateSelector = BookingWizardDateSelector;
//# sourceMappingURL=BookingWizardDateSelector.js.map