import cs from 'classnames';
import React__default, { useRef, useState, useCallback, useLayoutEffect } from 'react';
import useElementResize from '../../hooks/useElementResize.js';

const OverflowWrapper = "E_4100_0_7_owd0kml";
const HiddenStyle = "E_4100_0_7_h1jsgezc";
const Overflow = props => {
  const {
    children,
    overflow,
    offset = 0,
    depend
  } = props;
  const wrapperRef = useRef(null);
  const [init, setInit] = useState(true);
  const [isOverflow, setIsOverflow] = useState(false);
  const handleOverflow = useCallback(() => {
    var _a, _b, _c;
    const elWidth = ((_a = wrapperRef.current) == null ? void 0 : _a.offsetWidth) || 0;
    const parentWidth = ((_c = (_b = wrapperRef.current) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.offsetWidth) || 0;
    setInit(false);
    if (!elWidth || !parentWidth) {
      setIsOverflow(false);
      return;
    }
    setIsOverflow(elWidth > parentWidth - offset);
  }, [offset]);
  useElementResize(wrapperRef, handleOverflow, []);
  useLayoutEffect(() => {
    setInit(true);
  }, [depend]);
  useLayoutEffect(() => {
    if (init) {
      handleOverflow();
    }
  }, [handleOverflow, init]);
  const showOverflow = !init && isOverflow;
  return /* @__PURE__ */React__default.createElement(React__default.Fragment, null, /* @__PURE__ */React__default.createElement("span", {
    className: cs(showOverflow && HiddenStyle, OverflowWrapper),
    ref: wrapperRef
  }, children), showOverflow && /* @__PURE__ */React__default.createElement("span", null, overflow));
};
const ExtraOverflow = props => {
  const {
    els,
    extraEl,
    className,
    deps = [],
    reverse
  } = props;
  const wrapperRef = useRef(null);
  const [isOverflow, setIsOverflow] = useState(false);
  const [sliceEnd, setSliceEnd] = useState(0);
  const [init, setInit] = useState(true);
  const handleOverflow = useCallback(() => {
    const els2 = Array.from(wrapperRef.current.children);
    if (els2.length < 2) {
      setInit(false);
      setIsOverflow(false);
      return;
    }
    const parentWidth = wrapperRef.current.offsetWidth;
    const extraEl2 = els2[els2.length - 1];
    const secondLastEl = els2[els2.length - 2];
    let childRange = 0;
    let endIndex = -1;
    if (reverse) {
      childRange = secondLastEl.offsetLeft + secondLastEl.offsetWidth - els2[0].offsetLeft;
      endIndex = Array.from(els2).findIndex(el => {
        const range = el.offsetWidth + el.offsetLeft - els2[0].offsetLeft;
        return range + extraEl2.offsetWidth > parentWidth;
      });
    } else {
      childRange = secondLastEl.offsetLeft + secondLastEl.offsetWidth;
      endIndex = Array.from(els2).findIndex(el => {
        const range = el.offsetWidth + el.offsetLeft;
        return range + extraEl2.offsetWidth > parentWidth;
      });
    }
    setInit(false);
    setIsOverflow(childRange > parentWidth);
    if (endIndex !== -1) {
      setSliceEnd(endIndex);
    }
  }, [reverse]);
  useLayoutEffect(() => {
    setInit(true);
  }, [els]);
  useLayoutEffect(() => {
    if (init) {
      handleOverflow();
    }
  }, [handleOverflow, init, ...deps]);
  if (init) {
    return /* @__PURE__ */React__default.createElement("span", {
      className,
      ref: wrapperRef
    }, els, /* @__PURE__ */React__default.createElement(React__default.Fragment, null, extraEl(sliceEnd)));
  }
  if (isOverflow) {
    return /* @__PURE__ */React__default.createElement("span", {
      className,
      ref: wrapperRef
    }, els.slice(0, sliceEnd), /* @__PURE__ */React__default.createElement(React__default.Fragment, null, extraEl(sliceEnd)));
  }
  return /* @__PURE__ */React__default.createElement("span", {
    className,
    ref: wrapperRef
  }, els);
};
var Overflow$1 = Overflow;

export { ExtraOverflow, Overflow$1 as default };
