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';
import { Article } from '../../Article/Article';
import { Grid, GridItem } from '../../Grid/Grid';
import { ListLinks } from '../../ListLinks/ListLinks';
import { EssenceCard } from '../../EssenceCard/EssenceCard';
import { Slider, SliderItem } from '../../Slider/Slider';
import { Button } from '../../Button/Button';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a, _b;
    var _c = usePropsHandler(cnContentBuilderTemplate(), props), type = _c.type, title = _c.title, titleTag = _c.titleTag, text = _c.text, squads = _c.squads, items = _c.items, industry = _c.industry, industryColor = _c.industryColor, aliases = _c.aliases, services = _c.services, link = _c.link, linkColor = _c.linkColor;
    var typeNumber = type.toString();
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        React.createElement(Typography.Title, { size: "lg", className: cnContentBuilderTemplate('Title'), as: titleTag }, title),
        React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, rowGap: '3xl', colGap: 'm' },
                mobile: { cols: 2, gap: '3xl' }
            } },
            text && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 8 },
                    mobile: { col: 2 }
                }, className: cnContentBuilderTemplate('Column') },
                React.createElement(Article, { content: text }),
                industry && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                    React.createElement(Button, { view: "link-primary", isLink: true, label: industry.title, to: generatePath(aliases.INDUSTRIES_PAGE, {
                            slug: industry.slug
                        }), iconRight: IconArrowRight, decorBorder: (_a = industryColor === null || industryColor === void 0 ? void 0 : industryColor.replace('#', '')) !== null && _a !== void 0 ? _a : linkColor === null || linkColor === void 0 ? void 0 : linkColor.replace('#', '') }))),
                link && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                    React.createElement(Button, { view: "link-primary", isLink: true, label: link.title, to: link.link, iconRight: IconArrowRight, decorBorder: (_b = industryColor === null || industryColor === void 0 ? void 0 : industryColor.replace('#', '')) !== null && _b !== void 0 ? _b : linkColor === null || linkColor === void 0 ? void 0 : linkColor.replace('#', '') }))))),
            (squads === null || squads === void 0 ? void 0 : squads.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 4 },
                    mobile: { col: 2 }
                } },
                React.createElement(ListLinks, { items: squads, getLabel: function (item) { return item.title; }, getPath: function (item) {
                        return generatePath(aliases.INDUSTRIES_PAGE_INNER, {
                            slug: item.industrySlug,
                            inner_page: item.slug
                        });
                    } }))),
            (services === null || services === void 0 ? void 0 : services.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 4 },
                    mobile: { col: 2 }
                } },
                React.createElement(ListLinks, { items: services, getLabel: function (item) { return item.title; }, getPath: function (item) {
                        return generatePath(aliases.SERVICES_PAGE, {
                            slug: item.slug
                        });
                    } }))),
            (items === null || items === void 0 ? void 0 : items.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 3, colStart: 10 },
                    tablet: { col: 3, colStart: 6 },
                    mobile: { col: 2 }
                } },
                React.createElement(Slider, { pagination: { clickable: true }, watchOverflow: true }, items.map(function (item) { return (React.createElement(SliderItem, { key: item.id },
                    React.createElement(EssenceCard, __assign({}, item, { path: generatePath(aliases.BLOG_SINGLE, {
                            slug: item.slug
                        }), descriptionSmall: "More on topic", size: "s" })))); })))))));
});
export default ContentBuilderTemplate;
