import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import styled from 'styled-components';
import { Tooltip } from '../tooltip/Tooltip.component';
import { Text } from '../text/Text.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;
  text-align: ${(props) => (props.centered ? 'center' : 'left')};

  ${(props) => props.lineClamp > 1
    ? `
  display: -webkit-box;
  -webkit-line-clamp: ${props.lineClamp};
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  `
    : `overflow-wrap: break-word;
      white-space: nowrap;
      word-break: break-all;
      `};
`;
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, centered) {
    return (_jsx(ConstrainedTextContainer, { ref: constrainedTextRef, className: "sc-constrainedtext", lineClamp: lineClamp, centered: centered, children: text }));
}
function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, color, centered = false, }) {
    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: _jsx(Text, { color: color, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) }) })) : (_jsx(Text, { color: color, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) })) }));
}
export { ConstrainedText };
