import { __assign, __read } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import { forwardRefWithAs } from '../../../utils/types/PropsWithAsAttributes';
import { usePropsHandler } from '../../EventInterceptor/usePropsHandler';
import { cnContentBuilderTemplate } from './index';
import { Typography } from '../../Typography/Typography';
import { Article } from '../../Article/Article';
import { Button } from '../../Button/Button';
import { Picture } from '../../Picture/Picture';
import { Grid, GridItem } from '../../Grid/Grid';
import { cn } from '../../../utils/bem';
import Marquee from 'react-fast-marquee';
var cnComponent = cn('Cards');
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
    var _b = usePropsHandler(cnContentBuilderTemplate(), props), type = _b.type, title = _b.title, text = _b.text, partners = _b.partners;
    var typeNumber = type.toString();
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { className: cnContentBuilderTemplate('Title'), size: "xs", weight: "bold", transform: "uppercase", as: "h5" }, title)),
        text && (React.createElement(Grid, { breakpoints: { desktop: { cols: 12 } } },
            React.createElement(GridItem, { breakpoints: { desktop: { col: 8 } } },
                React.createElement(Article, { content: text, className: cnContentBuilderTemplate('SubTitle') })))),
        React.createElement(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.createElement(GridItem, { breakpoints: {
                    desktop: { col: 3 },
                    tablet: { col: 4 },
                    mobile: { col: 1 }
                }, key: partner.id }, partner.link ? (React.createElement("a", __assign({ href: partner.link, target: "_blank", title: partner.title, rel: "noreferrer" }, componentProps),
                React.createElement(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.createElement("div", __assign({ className: "WrapperPicture" }, componentProps),
                React.createElement(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.createElement(Button, { onClick: function () { return setIsOpen(true); }, view: "borderY", width: "full", size: "l", "data-text": "View more" },
            React.createElement(Marquee, { loop: 100, speed: 50 }, Array.from({ length: 50 }, function (_, i) { return (React.createElement(Typography.Text, { key: i, as: "span", weight: "bold", transform: "uppercase", size: "xs" }, "View more")); }))))));
});
export default ContentBuilderTemplate;
