import { __assign, __read } from "tslib";
// @ts-nocheck
import './TestimonialBlockCard.css';
import React from 'react';
import { IconClose } from '../../icons/IconClose/IconClose';
import { IconPlay } from '../../icons/IconPlay/IconPlay';
import { IconYouTube } from '../../icons/IconYouTube/IconYouTube';
import { cn } from '../../utils/bem';
import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
import { Button } from '../Button/Button';
import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
import { Modal } from '../Modal/Modal';
import { Mq } from '../Mq/Mq';
import { Picture } from '../Picture/Picture';
import { Typography } from '../Typography/Typography';
export var cnTestimonialBlockCard = cn('TestimonialBlockCard');
export var TestimonialBlockCard = forwardRefWithAs(function (props, ref) {
    var _a = __read(React.useState(false), 2), isModalOpen = _a[0], setIsModalOpen = _a[1];
    var _b = usePropsHandler(cnTestimonialBlockCard(), props), title = _b.title, _c = _b.buttonIcon, buttonIcon = _c === void 0 ? IconYouTube : _c, text = _b.text, linkText = _b.linkText, video = _b.video;
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: cnTestimonialBlockCard({}) },
            video.picture && Object.keys(video.picture).length > 0 && (React.createElement("div", { className: cnTestimonialBlockCard('Left') },
                React.createElement("div", { className: cnTestimonialBlockCard('Picture') },
                    React.createElement(Mq, { query: "--tablet-min" },
                        React.createElement(Button, { view: "primary", form: "circle", size: '3xxl', iconSize: 'm', iconRight: IconPlay, onlyIcon: true, className: cnTestimonialBlockCard('Picture-Button'), onClick: function () { return setIsModalOpen(true); } })),
                    React.createElement(Mq, { query: "--mobile" },
                        React.createElement(Button, { view: "primary", form: "circle", size: 'xxl', iconSize: 'm', iconRight: IconPlay, onlyIcon: true, className: cnTestimonialBlockCard('Picture-Button'), onClick: function () { return setIsModalOpen(true); } })),
                    React.createElement(Picture, __assign({}, video.picture, { cover: true })),
                    video.videoUrl && (React.createElement(Modal, { className: cnTestimonialBlockCard('Modal'), isOpen: isModalOpen, hasOverlay: true, width: "full", onOverlayClick: function () { return setIsModalOpen(false); }, onEsc: function () { return setIsModalOpen(false); } },
                        React.createElement("iframe", { title: "modal-iframe", src: video.videoUrl, frameBorder: '0', width: "100%", height: "100%" }),
                        React.createElement(Button, { view: "ghost", iconRight: IconClose, className: "Modal-Close", onClick: function () { return setIsModalOpen(false); } })))))),
            React.createElement("div", { className: cnTestimonialBlockCard('Right') },
                React.createElement("div", { className: cnTestimonialBlockCard('Border') }),
                title && (React.createElement(Typography.Title, { className: cnTestimonialBlockCard('Title'), size: "lg" }, title)),
                text && (React.createElement(Typography.Text, { className: cnTestimonialBlockCard('SubTitle') }, text)),
                video && (React.createElement("div", { className: cnTestimonialBlockCard('Button') },
                    React.createElement(Button, { view: "link-secondary", iconSize: 'xs', as: "a", href: video.url, label: linkText, iconRight: buttonIcon, target: "_blank" })))))));
});
