import { __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 Marquee from 'react-fast-marquee';
import { cn } from '../../../utils/bem';
var cnComponent = cn('Cards');
export var ContentBuilderTemplate0 = 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, pictures = _b.pictures;
    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" }, 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: pictures.length <= 4 }) }, pictures.map(function (picture, index) {
            if (!isOpen && index > 7)
                return false;
            return (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 3 },
                    tablet: { col: 4 },
                    mobile: { col: 1 }
                }, key: picture.url },
                React.createElement(Picture, { desktop: picture.url, desktopWebp: picture.urlWebp })));
        })),
        (pictures === null || pictures === void 0 ? void 0 : pictures.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 ContentBuilderTemplate0;
