import { __assign, __read, __rest } from "tslib";
// @ts-nocheck
/* eslint-disable jsx-a11y/anchor-has-content */
import './VideoCard.css';
import React, { useMemo, useState } 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 { getSizeByMap } from '../../utils/getSizeByMap';
import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
import { Button } from '../Button/Button';
import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
import { Modal } from '../Modal/Modal';
import { Picture } from '../Picture/Picture';
import { Tag } from '../Tag/Tag';
import { Typography } from '../Typography/Typography';
export var cardPropSize = ['s', 'm', 'l'];
export var cardPropSizeDefault = cardPropSize[0];
export var cardPropView = ['feed', 'filled', 'small_post', 'slider', 'text', 'text2'];
export var cardPropViewDefault = cardPropView[0];
export var cardPropDirection = ['column', 'row'];
export var cardPropSizeDirection = cardPropDirection[0];
var sizeMap = {
    s: 'tiny',
    m: 'sm',
    l: 'md'
};
export var cnVideoCard = cn('VideoCard');
export var VideoCard = forwardRefWithAs(function (props) {
    var _a = __read(useState(false), 2), isModalOpen = _a[0], setIsModalOpen = _a[1];
    var _b = usePropsHandler(cnVideoCard(), props), _c = _b.view, view = _c === void 0 ? cardPropViewDefault : _c, _d = _b.direction, direction = _d === void 0 ? cardPropSizeDirection : _d, _e = _b.size, size = _e === void 0 ? cardPropSizeDefault : _e, data = __rest(_b, ["view", "direction", "size"]);
    var _f = data || {}, postDate = _f.postDate, hrvTags = _f.hrvTags, tagsList = _f.tags, title = _f.title, bottomDescription = _f.bottomDescription, picture = _f.picture, _g = _f.linkIcon, linkIcon = _g === void 0 ? IconYouTube : _g, onClickButton = _f.onClickButton, url = _f.url, videoUrl = _f.videoUrl, descriptionSmall = _f.descriptionSmall, _h = _f.iconSize, iconSize = _h === void 0 ? 'm' : _h, style = _f.style, linkTitle = _f.linkTitle, buttonSize = _f.buttonSize, buttonIconSize = _f.buttonIconSize, detailLinkTitle = _f.detailLinkTitle;
    var currentIcon = linkIcon;
    var tags = useMemo(function () { return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: cnVideoCard('Tags') },
            hrvTags && (React.createElement(React.Fragment, null, hrvTags.map(function (tag) { return (React.createElement("div", { key: tag.id, className: cnVideoCard('Tag') },
                React.createElement(Tag, { mode: "link", label: tag.title, size: "s" }))); }))),
            tagsList && (React.createElement(React.Fragment, null, tagsList.map(function (tag) { return (React.createElement("div", { key: tag.id, className: cnVideoCard('Tag') },
                React.createElement(Tag, { mode: "link", label: tag.title, size: "s" }))); })))))); }, [hrvTags, tagsList]);
    var onClickButtonHandler = function () {
        if (url) {
            window.open(url, '_blank');
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: cnVideoCard({
                view: view,
                size: size,
                direction: direction
            }), style: style },
            videoUrl && (
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            React.createElement("div", { className: cnVideoCard('Link'), onClick: function () { return setIsModalOpen(true); } })),
            view !== 'text' && view !== 'text2' && picture && (React.createElement("div", { className: cnVideoCard('Photo') },
                React.createElement(Button, { view: "primary", form: "circle", iconRight: IconPlay, size: buttonSize, iconSize: buttonIconSize, onlyIcon: true, className: cnVideoCard('Photo-Button'), onClick: function () { return setIsModalOpen(true); } }),
                React.createElement(Picture, __assign({}, picture)))),
            (postDate || descriptionSmall || tagsList || title || linkTitle) && (React.createElement("div", { className: cnVideoCard('Body') },
                view !== 'text' && view !== 'filled' && postDate && (React.createElement("div", { className: cnVideoCard('Date') },
                    React.createElement(Typography.Text, { weight: "semibold", size: "xs" }, postDate))),
                descriptionSmall && (React.createElement("div", { className: cnVideoCard('DescriptionSmall') },
                    React.createElement(Typography.Text, { weight: "semibold", size: "xs", transform: "uppercase" }, descriptionSmall))),
                view === 'text3' && tags,
                title && (React.createElement("div", { className: cnVideoCard('Title') },
                    React.createElement(Typography.Title, { weight: "bold", size: getSizeByMap(sizeMap, size) }, title))),
                view !== 'text' && view !== 'text3' && view !== 'filled' && tags,
                view !== 'text' && view !== 'text2' && (linkTitle || detailLinkTitle) && (React.createElement("div", { className: cnVideoCard('Button') },
                    React.createElement(Button, { view: "link-secondary", iconRight: currentIcon, iconSize: iconSize, label: detailLinkTitle !== null && detailLinkTitle !== void 0 ? detailLinkTitle : linkTitle, onClick: onClickButton || onClickButtonHandler }))))),
            bottomDescription && (React.createElement(Typography.Text, { size: "s", view: "web", className: cnVideoCard('BottomDescription') }, bottomDescription))),
        React.createElement(Modal, { className: cnVideoCard('Modal'), isOpen: isModalOpen, hasOverlay: true, width: "full", onOverlayClick: function () { return setIsModalOpen(false); }, onEsc: function () { return setIsModalOpen(false); } },
            React.createElement("iframe", { title: "modal-iframe", src: videoUrl, frameBorder: "0", width: "100%", height: "100%" }),
            React.createElement(Button, { view: "ghost", iconRight: IconClose, className: "Modal-Close", onClick: function () { return setIsModalOpen(false); } }))));
});
