"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getArrowSize = getArrowSize;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const __1 = require("../index.js");
const locationContext_1 = require("../../gravity-blocks/context/locationContext/index.js");
const mobileContext_1 = require("../../gravity-blocks/context/mobileContext/index.js");
const hooks_1 = require("../../gravity-blocks/hooks/index.js");
const utils_1 = require("../../utils/index.js");
const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor.js"));
const b = (0, utils_1.block)('title-item');
function getArrowSize(size, isMobile) {
    switch (size) {
        case 'xs':
            return 13;
        case 's':
            return 16;
        case 'sm':
        case 'm':
            return isMobile ? 22 : 24;
        case 'l':
            return isMobile ? 26 : 38;
        default:
            return 20;
    }
}
const TitleItem = (props) => {
    const isMobile = React.useContext(mobileContext_1.MobileContext);
    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, analyticsEvents, } = props;
    const handleAnalytics = (0, hooks_1.useAnalytics)();
    const { hostname } = React.useContext(locationContext_1.LocationContext);
    const textMarkup = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
                    constructor: true,
                } }), custom && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)("span", { className: b('custom'), children: custom })] }))] }));
    let content;
    const insideClickableContent = ((0, jsx_runtime_1.jsxs)("span", { className: b('wrapper'), children: [textMarkup, "\u00A0", (0, jsx_runtime_1.jsx)(__1.ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })] }));
    const handleClick = React.useCallback(() => {
        if (analyticsEvents) {
            handleAnalytics(analyticsEvents);
        }
        if (onClick) {
            onClick();
        }
    }, [analyticsEvents, handleAnalytics, onClick]);
    if (!url && !onClick) {
        content = textMarkup;
    }
    else if (url) {
        content = ((0, jsx_runtime_1.jsx)("a", { className: b('link'), href: url, ...(0, utils_1.getLinkProps)(url, hostname), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
    }
    else if (onClick) {
        content = ((0, jsx_runtime_1.jsx)("button", { className: b('link'), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
    }
    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [anchor && (0, jsx_runtime_1.jsx)(Anchor_1.default, { id: anchor, className: b('anchor') }), React.createElement((0, utils_1.getHeaderTag)(textSize), {
                className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
                'data-qa': `${qa}-header`,
            }, content)] }));
};
exports.default = TitleItem;
//# sourceMappingURL=TitleItem.js.map
