"use strict";
exports.__esModule = true;
exports.ContentBuilderTemplate0 = 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 react_fast_marquee_1 = (0, tslib_1.__importDefault)(require("react-fast-marquee"));
var bem_1 = require("../../../utils/bem");
var cnComponent = (0, bem_1.cn)('Cards');
exports.ContentBuilderTemplate0 = (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, pictures = _b.pictures;
    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" }, 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: pictures.length <= 4 }) }, pictures.map(function (picture, index) {
            if (!isOpen && index > 7)
                return false;
            return (react_1["default"].createElement(Grid_1.GridItem, { breakpoints: {
                    desktop: { col: 3 },
                    tablet: { col: 4 },
                    mobile: { col: 1 }
                }, key: picture.url },
                react_1["default"].createElement(Picture_1.Picture, { desktop: picture.url, desktopWebp: picture.urlWebp })));
        })),
        (pictures === null || pictures === void 0 ? void 0 : pictures.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.ContentBuilderTemplate0;
