import { j as s } from "../../_virtual/jsx-runtime.js";
import { useRef as I, useState as d, useEffect as L } from "react";
import { Wrapper as A, Indicator as E } from "./styles.js";
import { noop as G, getId as S } from "../../utils/index.js";
import { Segment as j } from "./components/segment/Segment.js";
const v = "6px 60px", w = "2px 62px", l = 28, f = 44;
function H(e, i) {
  return e || (i === "small" ? w : v);
}
function C(e) {
  const {
    active: i,
    className: u,
    onClick: m = G,
    segmentList: o,
    size: n = "large",
    segmentPadding: h
  } = e, c = I(null), g = S(e["data-testid"]), [t, p] = d(), [r, x] = d({
    height: n === "small" ? l : f,
    left: 0,
    width: 0
  });
  return L(() => {
    t && t.current && x({
      left: t.current.offsetLeft,
      width: t.current.offsetWidth,
      height: t.current.offsetHeight
    });
  }, [c.current, t == null ? void 0 : t.current, o, n]), /* @__PURE__ */ s.jsxs(
    A,
    {
      className: u,
      ref: c,
      height: n === "small" ? l : f,
      "data-testid": e["data-testid"],
      "data-trackid": e["data-trackid"],
      children: [
        o.map((a) => /* @__PURE__ */ s.jsx(
          j,
          {
            segment: a,
            active: i.value === a.value,
            size: n,
            setActiveRef: p,
            segmentPadding: H(h, n),
            onChange: m
          },
          a.value
        )),
        /* @__PURE__ */ s.jsxs(
          E,
          {
            width: r.width,
            left: r.left,
            height: r.height,
            title: i.tooltip,
            "data-testid": g("indicator"),
            children: [
              i.icon && i.icon,
              i.label
            ]
          }
        )
      ]
    }
  );
}
export {
  C as SegmentedControl
};
