(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../../../utils/getTextWidth", "../../../typography/H", "../../../typography/P2", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var getTextWidth_1 = (0, tslib_1.__importDefault)(require("../../../utils/getTextWidth"));
    var H_1 = (0, tslib_1.__importDefault)(require("../../../typography/H"));
    var P2_1 = (0, tslib_1.__importDefault)(require("../../../typography/P2"));
    var styles_1 = require("./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 = (0, tslib_1.__rest)(_a, ["title", "subTitle", "trailContent", "size", "textOverflow"]);
        var headerRollRef = (0, react_1.useRef)(null);
        var titleRef = (0, react_1.useRef)(null);
        var subtitleRef = (0, react_1.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 = (0, getTextWidth_1.default)(String(title), getComputedStyle(titleRef.current).font);
                var widthSubTitleText = (0, getTextWidth_1.default)(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();
                }
            }
        };
        (0, react_1.useEffect)(function () {
            setTooltipWhenOverflowText();
        }, [title, subTitle]);
        return (react_1.default.createElement(styles_1.HeaderRollStyled, (0, tslib_1.__assign)({ ref: headerRollRef, size: size, textOverflow: textOverflow }, props),
            react_1.default.createElement(styles_1.LeadContentStyled, null,
                react_1.default.createElement(H_1.default, { type: "capricornus", ref: titleRef, className: "text title" }, title),
                react_1.default.createElement(P2_1.default, { type: "corvus", ref: subtitleRef, className: "text sub-title" }, subTitle)),
            trailContent && react_1.default.createElement(styles_1.TrailContent, null, trailContent)));
    };
    exports.default = HeaderRoll;
});
