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