import { jsx as r, jsxs as M, Fragment as j } from "react/jsx-runtime";
import { useReducedMotion as B, motion as H } from "motion/react";
import { useRef as U, useState as L, useMemo as W } from "react";
import X from "../checkbox/Checkbox.js";
import k from "../../utils/classNames.js";
import { resolveRowKey as q, resolveRowClassName as z } from "./model/resolveRowMeta.js";
import { getVerticalAlignClassName as G } from "./shared/getAlignClassName.js";
import { useOptionalTableInteractionContext as J } from "./context/TableInteractionContext.js";
import { useOptionalTableRenderConfigContext as Q } from "./context/TableRenderConfigContext.js";
import { useOptionalTableSection as Y, useTableBodyContext as Z, extractTableHtmlAttributes as I, TableRowContext as $ } from "./context/TableStructureContext.js";
import { useOptionalTableRenderContext as ee } from "./context/TableRenderContext.js";
import { getInteractiveRowProps as oe } from "./shared/getInteractiveRowProps.js";
const C = 0.18, te = (b) => {
  const {
    isSelected: p,
    isSelectable: u,
    hideSelectionControl: x,
    isTableView: g,
    onToggleSelection: h,
    cardCellClassName: l,
    selectionCheckboxVerticalAlignment: e
  } = b;
  return /* @__PURE__ */ r(
    "div",
    {
      className: k(
        "table-cell table-selection-cell",
        G(e),
        !g && l
      ),
      role: "cell",
      "aria-colindex": 1,
      style: g ? { gridColumn: "1 / span 1", gridRow: "1 / span 1" } : void 0,
      onClick: (n) => n.stopPropagation(),
      onKeyDown: (n) => n.stopPropagation(),
      children: !x && /* @__PURE__ */ r("div", { className: "table-selection-control", children: /* @__PURE__ */ r(X, { checked: p, disabled: !u, onChange: h }) })
    }
  );
}, pe = (b) => {
  const { children: p, className: u, noHover: x, parentKey: g, selectable: h, ...l } = b, e = Q(), n = ee(), o = J(), P = Y(), y = Z(), m = U(0);
  m.current = 0;
  const [D, f] = L(!0), v = B(), O = W(
    () => v ? {
      initial: { opacity: 0 },
      animate: {
        opacity: 1,
        transition: { duration: C, ease: "easeInOut" }
      },
      exit: {
        opacity: 0,
        transition: { duration: C, ease: "easeInOut" }
      }
    } : {
      initial: { opacity: 0, height: 0, y: -8 },
      animate: {
        opacity: 1,
        height: "auto",
        y: 0,
        transition: { duration: C, ease: "easeOut" }
      },
      exit: {
        opacity: 0,
        height: 0,
        y: -8,
        transition: { duration: C, ease: "easeInOut" }
      }
    },
    [v]
  );
  if (!n || !e || !o || n.columns.length === 0 || P !== "body" || !y)
    return null;
  const c = l, i = y.nextRowIndex(), t = q(c, i, e.rowKey), K = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(c, i) : e.rowAnimationProps, a = oe({
    isClickable: o.isClickable,
    onRowClick: (s, d) => {
      o.onRowClick?.(s, d), o.onActiveRowChange?.(
        o.activeRowId === t ? void 0 : t,
        s,
        d
      );
    },
    row: c,
    rowIndex: i
  });
  let w;
  e.expandedRowAnimation !== !1 && (w = {
    ...O,
    ...K
  });
  const R = o.selectableRowIdSet.has(t), A = R && o.selectedRowIdSet.has(t), S = k(
    "table-row",
    "table-row-expanded-data",
    !e.isTableView && "divider-y-1 divider-color-lighter divider-style-solid",
    o.activeRowId === t && "table-row-active",
    A && "table-row-selected",
    a.isClickableClassName,
    x && "table-row-no-hover",
    !e.isTableView && e.cardClasses.rowClassName,
    u,
    z(e.rowClassName, c, i)
  ), V = o.showSelectionColumn && /* @__PURE__ */ r(
    te,
    {
      isSelected: A,
      isSelectable: R,
      hideSelectionControl: !R && o.hideSelectionCheckboxesForExcludedRows,
      isTableView: e.isTableView,
      onToggleSelection: () => o.onToggleRowSelection?.(t),
      cardCellClassName: e.cardClasses.cellClassName,
      selectionCheckboxVerticalAlignment: e.selectionCheckboxVerticalAlignment
    }
  ), T = /* @__PURE__ */ M(j, { children: [
    V,
    p
  ] }), E = {
    ...I(l),
    className: S,
    "data-index": i,
    "data-row-id": String(t),
    onClick: a.onClick,
    onKeyDown: a.onKeyDown,
    role: "row",
    tabIndex: a.tabIndex
  }, _ = {
    ...I(l),
    className: S,
    "data-index": i,
    "data-row-id": String(t),
    onClick: a.onClick,
    onKeyDown: a.onKeyDown,
    role: "row",
    tabIndex: a.tabIndex,
    onAnimationStart: () => f(!0),
    onAnimationComplete: () => f(!1),
    ...w,
    style: {
      ...w?.style ?? {},
      overflow: D ? "hidden" : "visible"
    }
  }, N = /* @__PURE__ */ r(
    $.Provider,
    {
      value: {
        nextColumnIndex: (s, d = 1) => {
          if (s !== void 0 && s >= 0)
            return m.current = s + d, s;
          const F = m.current;
          return m.current += d, F;
        },
        rowIndex: i,
        rowId: t,
        rowData: c
      },
      children: w ? /* @__PURE__ */ r(H.div, { ..._, children: T }) : /* @__PURE__ */ r("div", { ...E, children: T })
    }
  );
  return n.renderDraft.hasExpandableRows = !0, n.renderDraft.bodyRows.push({
    rowId: t,
    rowIndex: i,
    kind: "expanded",
    selectable: h !== !1,
    render: () => N
  }), n.isRegisteringBodyRows ? null : N;
};
export {
  pe as default
};
//# sourceMappingURL=TableExpandedRow.js.map
