import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import styled from 'styled-components';
import { Tooltip } from '../tooltip/Tooltip.component';
// for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
// it should work on all major navigator, despite the --webkit prefix
// just in case if we don't use line clamp we can just use the classic way
const ConstrainedTextContainer = styled.div `
  overflow: hidden;
  text-overflow: ellipsis;

  ${(props) => props.lineClamp > 1
    ? `
  display: -webkit-box;
  -webkit-line-clamp: ${props.lineClamp};
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  `
    : `overflow-wrap: break-word;
      white-space: nowrap;`}
}

;
`;
const BlockTooltip = styled.div `
  width: stretch;
  & > .sc-tooltip {
    display: block;
  }
`;
function isEllipsisActive(element) {
    return (element &&
        (element.offsetWidth < element.scrollWidth ||
            element.offsetHeight < element.scrollHeight));
}
function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
    return (_jsx(ConstrainedTextContainer, { ref: constrainedTextRef, className: "sc-constrainedtext", lineClamp: lineClamp, children: text }));
}
function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, }) {
    const [displayToolTip, setDisplayToolTip] = useState(false);
    const constrainedTextRef = useCallback((element) => {
        element && text && setDisplayToolTip(isEllipsisActive(element));
    }, [text]);
    return (_jsx(BlockTooltip, { children: displayToolTip ? (_jsx(Tooltip, { overlay: text, overlayStyle: tooltipStyle, placement: tooltipPlacement, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text) })) : (getConstrainedTextContainer(constrainedTextRef, lineClamp, text)) }));
}
export { ConstrainedText };
