"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 ListLinks_1 = require("../../ListLinks/ListLinks");
var Mq_1 = require("../../Mq/Mq");
var Grid_1 = require("../../Grid/Grid");
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, text = _a.text, items = _a.items;
    var typeNumber = type.toString();
    return (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)({ type: typeNumber }) },
        react_1["default"].createElement(Grid_1.Grid, { breakpoints: { desktop: { cols: 12, gap: 'xl' } } },
            (title || text) && (react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 5 } } },
                title && (react_1["default"].createElement(Typography_1.Typography.Title, { size: "lg", className: (0, index_1.cnContentBuilderTemplate)('Title') }, title)),
                text && react_1["default"].createElement(Article_1.Article, { content: text, className: (0, index_1.cnContentBuilderTemplate)('SubTitle') }))),
            (items === null || items === void 0 ? void 0 : items.length) > 0 && (react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 5, colStart: 7 } } },
                react_1["default"].createElement(Mq_1.Mq, { query: "--desktop" },
                    react_1["default"].createElement(ListLinks_1.ListLinks, { items: items, getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                react_1["default"].createElement(Mq_1.Mq, { query: "--mobile" },
                    react_1["default"].createElement(ListLinks_1.ListLinks, { items: items, getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                react_1["default"].createElement(Mq_1.Mq, { query: "--tablet" },
                    react_1["default"].createElement(Grid_1.Grid, { cols: "2", gap: "m" },
                        react_1["default"].createElement(Grid_1.GridItem, { col: "1" },
                            react_1["default"].createElement(ListLinks_1.ListLinks, { items: items.filter(function (w, index) { return (index & 1) === 0; }), getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                        react_1["default"].createElement(Grid_1.GridItem, { col: "1" },
                            react_1["default"].createElement(ListLinks_1.ListLinks, { items: items.filter(function (w, index) { return (index & 1) !== 0; }), getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })))))))));
});
exports["default"] = exports.ContentBuilderTemplate;
