import { __assign, __rest } from "tslib";
import React, { useEffect, useRef } from "react";
import getTextWidth from "../../../utils/getTextWidth";
import H from "../../../typography/H";
import P2 from "../../../typography/P2";
import { HeaderRollStyled, LeadContentStyled, TrailContent } from "./styles";
var HeaderRoll = function (_a) {
    var title = _a.title, subTitle = _a.subTitle, trailContent = _a.trailContent, _b = _a.size, size = _b === void 0 ? "l" : _b, textOverflow = _a.textOverflow, props = __rest(_a, ["title", "subTitle", "trailContent", "size", "textOverflow"]);
    var headerRollRef = useRef(null);
    var titleRef = useRef(null);
    var subtitleRef = useRef(null);
    var resetTooltip = function () {
        var _a, _b;
        (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute("title");
        (_b = subtitleRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute("title");
    };
    var setTooltip = function () {
        var _a, _b;
        (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("title", String(title));
        subTitle !== undefined &&
            ((_b = subtitleRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute("title", String(subTitle)));
    };
    var setTooltipWhenOverflowText = function () {
        resetTooltip();
        if (headerRollRef.current && titleRef.current && subtitleRef.current) {
            var widthTitleText = getTextWidth(String(title), getComputedStyle(titleRef.current).font);
            var widthSubTitleText = getTextWidth(String(subTitle || ""), getComputedStyle(subtitleRef.current).font);
            var gapBetweenTitles = subTitle ? 8 : 0;
            var headerRoll = headerRollRef.current;
            var _a = getComputedStyle(headerRoll), paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight;
            var contentMaxWidth = headerRoll.clientWidth -
                parseInt(paddingLeft, 10) -
                parseInt(paddingRight, 10) -
                gapBetweenTitles;
            var widthText = widthTitleText + widthSubTitleText;
            if (widthText > contentMaxWidth) {
                setTooltip();
            }
        }
    };
    useEffect(function () {
        setTooltipWhenOverflowText();
    }, [title, subTitle]);
    return (React.createElement(HeaderRollStyled, __assign({ ref: headerRollRef, size: size, textOverflow: textOverflow }, props),
        React.createElement(LeadContentStyled, null,
            React.createElement(H, { type: "capricornus", ref: titleRef, className: "text title" }, title),
            React.createElement(P2, { type: "corvus", ref: subtitleRef, className: "text sub-title" }, subTitle)),
        trailContent && React.createElement(TrailContent, null, trailContent)));
};
export default HeaderRoll;
