import { __assign, __rest } from "tslib";
import React, { forwardRef, useEffect, useRef } from "react";
import getTextWidth from "../../../utils/getTextWidth";
import P1 from "../../../typography/P1";
import Label from "../../../Label";
import { SubHeaderRollStyled } from "./styles";
var SubHeaderRoll = forwardRef(function (_a, ref) {
    var title = _a.title, _b = _a.statusLabel, statusLabel = _b === void 0 ? "info" : _b, textLabel = _a.textLabel, textOverflow = _a.textOverflow, isIconLabel = _a.isIconLabel, props = __rest(_a, ["title", "statusLabel", "textLabel", "textOverflow", "isIconLabel"]);
    var titleRef = useRef(null);
    var setTooltipWhenOverflowTitle = function () {
        if (titleRef.current) {
            titleRef.current.removeAttribute("title");
            var widthText = getTextWidth(String(title), getComputedStyle(titleRef.current).font);
            if (widthText >= titleRef.current.clientWidth) {
                titleRef.current.setAttribute("title", String(title));
            }
        }
    };
    useEffect(function () {
        setTooltipWhenOverflowTitle();
    }, [title]);
    return (React.createElement(SubHeaderRollStyled, __assign({ ref: ref, textOverflow: textOverflow }, props),
        React.createElement(P1, { className: "title", ref: titleRef, type: "phoenix", as: "p" }, title),
        textLabel && (React.createElement(Label, { className: "subtitle", status: statusLabel, isIcon: isIconLabel }, textLabel))));
});
SubHeaderRoll.displayName = "SubHeaderRoll";
export default SubHeaderRoll;
