"use strict";
exports.__esModule = true;
exports.ContentBuilderTemplate = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./ContentBuilderTemplate.css");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var PropsWithAsAttributes_1 = require("../../../utils/types/PropsWithAsAttributes");
var usePropsHandler_1 = require("../../EventInterceptor/usePropsHandler");
var index_1 = require("./index");
var Typography_1 = require("../../Typography/Typography");
var Banner_1 = require("../../Banner/Banner");
var Slider_1 = require("../../Slider/Slider");
exports.ContentBuilderTemplate = (0, PropsWithAsAttributes_1.forwardRefWithAs)(function (props, ref) {
    var _a = (0, usePropsHandler_1.usePropsHandler)((0, index_1.cnContentBuilderTemplate)(), props), type = _a.type, title = _a.title, items = _a.items, id = _a.id;
    var typeNumber = type.toString();
    var options = {
        watchOverflow: true,
        spaceBetween: 1000,
        navigation: true,
        pagination: {
            el: "#pagination_".concat(id.split('-')[0]),
            clickable: true,
            type: 'fraction',
            renderFraction: Slider_1.renderFraction
        }
    };
    return (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)({ type: typeNumber }) },
        title && (react_1["default"].createElement(Typography_1.Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: (0, index_1.cnContentBuilderTemplate)('Title') }, title)),
        (items === null || items === void 0 ? void 0 : items.length) > 0 && (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Slider') },
            react_1["default"].createElement(Slider_1.Slider, (0, tslib_1.__assign)({}, options), items.map(function (item) { return (react_1["default"].createElement(Slider_1.SliderItem, null,
                react_1["default"].createElement(Banner_1.Banner, (0, tslib_1.__assign)({}, item, { view: "case", bgColor: item.color, inverted: item.isInverted, titleSize: "lg" })))); })),
            react_1["default"].createElement("div", { className: "swiper-pagination", id: 'pagination_' + id.split('-')[0] })))));
});
exports["default"] = exports.ContentBuilderTemplate;
