import { __assign, __rest } from "tslib";
/* eslint-disable jsx-a11y/control-has-associated-label */
// @ts-nocheck
/* eslint-disable jsx-a11y/anchor-has-content */
import './BlogCard.css';
import React, { useMemo } from 'react';
import { NavLink } from 'react-router-dom';
import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
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 { Picture } from '../Picture/Picture';
import { Tag } from '../Tag/Tag';
import * as Typography from '../Typography/Typography';
export var cardPropSize = ['s', 'm', 'l'];
export var cardPropSizeDefault = cardPropSize[0];
export var cardPropView = ['feed', 'filled', 'text', 'text2', 'text3'];
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 cnBlogCard = cn('BlogCard');
export var BlogCard = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnBlogCard(), props), _b = _a.view, view = _b === void 0 ? cardPropViewDefault : _b, _c = _a.direction, direction = _c === void 0 ? cardPropSizeDirection : _c, _d = _a.size, size = _d === void 0 ? cardPropSizeDefault : _d, data = __rest(_a, ["view", "direction", "size"]);
    var _e = data || {}, postDate = _e.postDate, hrvTags = _e.hrvTags, tagsList = _e.tags, title = _e.title, picture = _e.picture, _f = _e.linkIcon, linkIcon = _f === void 0 ? IconArrowRight : _f, onClickButton = _e.onClickButton, url = _e.url, path = _e.path, descriptionSmall = _e.descriptionSmall, _g = _e.iconSize, iconSize = _g === void 0 ? 'm' : _g, style = _e.style, linkTitle = _e.linkTitle, detailLinkTitle = _e.detailLinkTitle;
    var currentIcon = linkIcon;
    var tags = useMemo(function () { return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: cnBlogCard('Tags') },
            hrvTags && (React.createElement(React.Fragment, null, hrvTags.map(function (tag) { return (React.createElement("div", { key: tag.id, className: cnBlogCard('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: cnBlogCard('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("div", { className: cnBlogCard({
            view: view,
            size: size,
            direction: direction
        }), style: style },
        path && React.createElement(NavLink, { className: cnBlogCard('Link'), to: path }),
        view !== 'text' && view !== 'text2' && view !== 'text3' && picture && (React.createElement("div", { className: cnBlogCard('Photo') },
            React.createElement(Picture, __assign({}, picture)))),
        React.createElement("div", { className: cnBlogCard('Body') },
            view !== 'text' && view !== 'text3' && postDate && (React.createElement("div", { className: cnBlogCard('Date') },
                React.createElement(Typography.Typography.Text, { weight: "semibold", size: "xs" }, postDate))),
            descriptionSmall && (React.createElement("div", { className: cnBlogCard('DescriptionSmall') },
                React.createElement(Typography.Typography.Text, { weight: "semibold", size: "xs", transform: "uppercase" }, descriptionSmall))),
            view === 'text3' && tags,
            React.createElement("div", { className: cnBlogCard('Title') },
                React.createElement(Typography.Typography.Title, { weight: "bold", size: getSizeByMap(sizeMap, size) }, title)),
            view !== 'text' && view !== 'filled' && view !== 'text3' && tags,
            view !== 'text' && view !== 'text2' && linkTitle && (React.createElement("div", { style: {
                    pointerEvents: 'none'
                }, className: cnBlogCard('Button') },
                React.createElement(Button, { view: "link-secondary", iconRight: currentIcon, iconSize: iconSize, label: detailLinkTitle !== null && detailLinkTitle !== void 0 ? detailLinkTitle : linkTitle, onClick: onClickButton || onClickButtonHandler }))))));
});
