"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 classnames_1 = __importDefault(require("classnames"));
const react_1 = __importStar(require("react"));
const swiper_1 = require("swiper");
const react_2 = require("swiper/react");
const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
const EventCard_1 = __importDefault(require("./EventCard"));
const Headline_1 = __importDefault(require("../Headline"));
const Icon_1 = __importStar(require("../Icon/Icon"));
const Text_1 = __importStar(require("../Text"));
const Color_1 = require("../../../util/Color");
const EventCarousel_module_scss_1 = __importDefault(require("./EventCarousel.module.scss"));
const EventCarousel = ({ small = false, data = [], defaultExpanded = false }) => {
    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
    const commonTitleProps = (0, react_1.useMemo)(() => ({
        color: Color_1.Color.Accent,
        className: (0, classnames_1.default)({
            [EventCarousel_module_scss_1.default.titleWidthLimited]: small,
        }),
    }), [small]);
    const headlineProps = (0, react_1.useMemo)(() => small
        ? Object.assign(Object.assign({}, commonTitleProps), { type: Text_1.TextType.Body, bold: true }) : Object.assign(Object.assign({}, commonTitleProps), { size: 'large' }), [small]);
    const [TitleComponent, titleProps] = (0, react_1.useMemo)(() => [small ? Text_1.default : Headline_1.default, headlineProps], [small]);
    return (react_1.default.createElement("div", { className: "u-w-fluid u-pad-bottom" },
        react_1.default.createElement("div", { className: "container" },
            react_1.default.createElement("div", { className: EventCarousel_module_scss_1.default.headline, onClick: () => {
                    setExpanded(!expanded);
                } },
                react_1.default.createElement("div", { className: (0, classnames_1.default)('u-flex u-w-100', 'u-flex-nowrap', 'u-flex-gap', 'u-flex-align-center', {
                        'u-flex-justify-flex-start': !small,
                        'u-flex-justify-space-between': small,
                    }) },
                    react_1.default.createElement(TitleComponent, Object.assign({}, titleProps), "We recommend during your stay"),
                    react_1.default.createElement(Icon_1.default, { icon: !expanded ? Icon_1.IconType.ArrowDown3 : Icon_1.IconType.ArrowUp3, color: Color_1.Color.Accent, size: small ? '18px' : '32px' })))),
        react_1.default.createElement(AutoAutoHeight_1.default, { open: expanded, startOpen: expanded },
            react_1.default.createElement("div", { className: "u-pad-top--medium" },
                react_1.default.createElement("div", { className: EventCarousel_module_scss_1.default.swiperContainer },
                    react_1.default.createElement("div", { className: "container" },
                        react_1.default.createElement(react_2.Swiper, { navigation: !small, modules: [swiper_1.Navigation], spaceBetween: small ? 20 : 30, slidesPerView: small ? 1.2 : 'auto', 
                            // Prevent Swiper Slide move on click event
                            noSwipingSelector: "button" }, data.map((event, index) => (react_1.default.createElement(react_2.SwiperSlide, { style: {
                                width: small ? undefined : 524,
                            }, key: index },
                            react_1.default.createElement(EventCard_1.default, { ratio: small ? 380 / 345 : 380 / 524, event: event })))))))))));
};
exports.default = EventCarousel;
//# sourceMappingURL=EventCarousel.js.map