import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ToggleArrow, YFMWrapper } from "../index.js";
import { LocationContext } from "../../gravity-blocks/context/locationContext/index.js";
import { MobileContext } from "../../gravity-blocks/context/mobileContext/index.js";
import { useAnalytics } from "../../gravity-blocks/hooks/index.js";
import { block, getHeaderTag, getLinkProps } from "../../utils/index.js";
import Anchor from "../Anchor/Anchor.js";
import './TitleItem.css';
const b = block('title-item');
export 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);
    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, analyticsEvents, } = props;
    const handleAnalytics = useAnalytics();
    const { hostname } = React.useContext(LocationContext);
    const textMarkup = (_jsxs(React.Fragment, { children: [_jsx(YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
                    constructor: true,
                } }), custom && (_jsxs(React.Fragment, { children: ["\u00A0", _jsx("span", { className: b('custom'), children: custom })] }))] }));
    let content;
    const insideClickableContent = (_jsxs("span", { className: b('wrapper'), children: [textMarkup, "\u00A0", _jsx(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 = (_jsx("a", { className: b('link'), href: url, ...getLinkProps(url, hostname), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
    }
    else if (onClick) {
        content = (_jsx("button", { className: b('link'), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
    }
    return (_jsxs(React.Fragment, { children: [anchor && _jsx(Anchor, { id: anchor, className: b('anchor') }), React.createElement(getHeaderTag(textSize), {
                className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
                'data-qa': `${qa}-header`,
            }, content)] }));
};
export default TitleItem;
//# sourceMappingURL=TitleItem.js.map
