"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 Article_1 = require("../../Article/Article");
var Button_1 = require("../../Button/Button");
var Picture_1 = require("../../Picture/Picture");
var Grid_1 = require("../../Grid/Grid");
var bem_1 = require("../../../utils/bem");
var react_fast_marquee_1 = (0, tslib_1.__importDefault)(require("react-fast-marquee"));
var cnComponent = (0, bem_1.cn)('Cards');
exports.ContentBuilderTemplate = (0, PropsWithAsAttributes_1.forwardRefWithAs)(function (props, ref) {
    var _a = (0, tslib_1.__read)(react_1["default"].useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
    var _b = (0, usePropsHandler_1.usePropsHandler)((0, index_1.cnContentBuilderTemplate)(), props), type = _b.type, title = _b.title, text = _b.text, partners = _b.partners;
    var typeNumber = type.toString();
    return (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)({ type: typeNumber }) },
        title && (react_1["default"].createElement(Typography_1.Typography.Text, { className: (0, index_1.cnContentBuilderTemplate)('Title'), size: "xs", weight: "bold", transform: "uppercase", as: "h5" }, title)),
        text && (react_1["default"].createElement(Grid_1.Grid, { breakpoints: { desktop: { cols: 12 } } },
            react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 8 } } },
                react_1["default"].createElement(Article_1.Article, { content: text, className: (0, index_1.cnContentBuilderTemplate)('SubTitle') })))),
        react_1["default"].createElement(Grid_1.Grid, { breakpoints: {
                desktop: { cols: 12 },
                tablet: { cols: 8 },
                mobile: { cols: 2 }
            }, className: cnComponent({ hideTopBorder: partners.length <= 4 }) }, partners.map(function (partner, index) {
            var _a, _b;
            var _c, _d, _e, _f;
            if (!isOpen && index > 7)
                return false;
            var componentProps = (_a = {},
                _a['data-badge-text'] = null,
                _a);
            if (partner.isNew) {
                componentProps["class"] = 'Partner_badge';
                componentProps.style = (_b = {},
                    _b['--button-badge-color'] = partner.isNewColor,
                    _b['--button-badge-inverted'] = partner.isInverted
                        ? '#fff'
                        : null,
                    _b);
                componentProps['data-badge-text'] = partner.isNewText;
            }
            return (react_1["default"].createElement(Grid_1.GridItem, { breakpoints: {
                    desktop: { col: 3 },
                    tablet: { col: 4 },
                    mobile: { col: 1 }
                }, key: partner.id }, partner.link ? (react_1["default"].createElement("a", (0, tslib_1.__assign)({ href: partner.link, target: "_blank", title: partner.title, rel: "noreferrer" }, componentProps),
                react_1["default"].createElement(Picture_1.Picture, { desktop: (_c = partner.picture) === null || _c === void 0 ? void 0 : _c.url, desktopWebp: (_d = partner.picture) === null || _d === void 0 ? void 0 : _d.urlWebp }))) : (react_1["default"].createElement("div", (0, tslib_1.__assign)({ className: "WrapperPicture" }, componentProps),
                react_1["default"].createElement(Picture_1.Picture, { desktop: (_e = partner.picture) === null || _e === void 0 ? void 0 : _e.url, desktopWebp: (_f = partner.picture) === null || _f === void 0 ? void 0 : _f.urlWebp })))));
        })),
        (partners === null || partners === void 0 ? void 0 : partners.length) > 8 && !isOpen && (react_1["default"].createElement(Button_1.Button, { onClick: function () { return setIsOpen(true); }, view: "borderY", width: "full", size: "l", "data-text": "View more" },
            react_1["default"].createElement(react_fast_marquee_1["default"], { loop: 100, speed: 50 }, Array.from({ length: 50 }, function (_, i) { return (react_1["default"].createElement(Typography_1.Typography.Text, { key: i, as: "span", weight: "bold", transform: "uppercase", size: "xs" }, "View more")); }))))));
});
exports["default"] = exports.ContentBuilderTemplate;
