import { __assign } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import { generatePath } from 'react-router-dom';
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 { Slider, SliderItem } from '../../Slider/Slider';
import { EssenceCard } from '../../EssenceCard/EssenceCard';
import { Button } from '../../Button/Button';
import { IconOpenInNew } from '../../../icons/IconOpenInNew/IconOpenInNew';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, text = _a.text, items = _a.items, aliases = _a.aliases, button = _a.button, linkTitleType0 = _a.linkTitleType0, linkTitleType1 = _a.linkTitleType1;
    var typeNumber = type.toString();
    var options = {
        navigation: true,
        breakpoints: {
            767: {
                spaceBetween: 16,
                slidesPerView: 2
            },
            1200: {
                spaceBetween: 24,
                slidesPerView: 3
            }
        },
        spaceBetween: 8,
        slidesPerView: 1,
        watchOverflow: true
    };
    var generateParams = function (options) {
        if (options.contentType === 4) {
            return {
                contentType: options.contentType,
                picture: options.picture,
                routePath: options.link,
                targetBlank: options.targetBlank,
                title: options.title,
                view: 'filled',
                size: 'm',
                linkIcon: IconOpenInNew,
                linkTitle: options.linkTitle,
                redirectTo: options.link
            };
        }
        if (options.contentType === 3) {
            return __assign(__assign({}, options), { routePath: generatePath(aliases.EVENTS_PAGE, {
                    slug: options.slug
                }) });
        }
        if (options.contentType === 0) {
            return {
                contentType: options.contentType,
                picture: options.picture,
                title: options.title,
                view: 'filled',
                size: 'm',
                path: generatePath(aliases.BLOG_SINGLE, {
                    slug: options.slug
                }),
                linkTitle: linkTitleType0,
                linkTitleType1: linkTitleType1,
                url: options.url,
                videoUrl: options.videoUrl,
                video: options.video
            };
        }
        if (options.contentType === 2) {
            return {
                contentType: options.contentType,
                picture: options.picture,
                title: options.title,
                view: 'filled',
                size: 'm',
                linkTitle: linkTitleType1 || 'watch on youtube',
                url: options.url,
                videoUrl: options.videoUrl,
                video: options.video
            };
        }
        if (options.contentType === 6) {
            return __assign(__assign({}, options), { view: 'filled', size: 'm', linkTitle: 'learn more', linkIcon: IconOpenInNew, path: generatePath(aliases.INDUSTRIES_PAGE_INNER, {
                    slug: options.industrySlug,
                    inner_page: options.slug
                }) });
        }
        if (options.contentType === 5) {
            return __assign(__assign({}, options), { view: 'filled', size: 'm', linkTitle: 'learn more', path: generatePath(aliases.NEWSROOM_PAGE, {
                    slug: options.slug,
                    parentSlug: options.parentSlug
                }) });
        }
        return __assign({}, options);
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title') }, title)),
        text && (React.createElement(Article, { content: text, className: cnContentBuilderTemplate('SubTitle') })),
        items && (React.createElement(Slider, __assign({}, options), items.map(function (post, index) { return (React.createElement(SliderItem, { key: post.id },
            React.createElement(EssenceCard, __assign({}, generateParams(post))))); }))),
        button && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
            React.createElement(Button, __assign({}, button))))));
});
export default ContentBuilderTemplate;
