import { jsx as t, jsxs as p } from "@emotion/react/jsx-runtime";
import { useState as k, useCallback as L } from "react";
import { CardDetailContainerStyled as $, ContainerLabelValueColumnStyled as F, ContentWrapperColumnStyled as K, LabelHeaderColumnStyled as O, EditorCellWrapperStyled as V, ValueColumnStyled as h, EditablePlaceholderStyled as W, IconButtonEditStyled as j } from "../../../../slots/DataGridSlot.js";
import { DICTIONARY as z } from "../../../../dictionary.js";
import { useModuleDictionary as H } from "@m4l/core";
import { ActionsEditOutlined as P } from "@m4l/icons";
import { useComponentSize as T } from "../../../../../../hooks/useComponentSize/index.js";
function U({
  row: w,
  columns: C,
  onRowsChange: l,
  size: E = "medium",
  rows: o,
  rowIndex: n
}) {
  const [b, c] = k(null), [f, v] = k(0), { getLabel: x } = H(), { currentSize: D } = T(E), i = o[n] || w, R = L(() => {
    v((e) => e + 1);
  }, []), g = C.map((e) => e.renderCell ? {
    ...e,
    // Agregar onAfterChange al objeto de la columna
    onAfterChange: R
  } : e);
  return /* @__PURE__ */ t($, { ownerState: {}, children: g.map((e, d) => {
    const r = C[d], A = !!e.onAfterChange ? `${r.key}-${f}` : `${r.key}`;
    return /* @__PURE__ */ t(F, { ownerState: {}, children: /* @__PURE__ */ p(
      K,
      {
        ownerState: {},
        "data-testid": `card-detail-column-${r.key}`,
        onDoubleClick: e.renderEditCell && b !== e.key ? () => {
          c(e.key);
        } : void 0,
        children: [
          /* @__PURE__ */ p(O, { ownerState: {}, variant: "bodyStandard", color: "text.secondary", children: [
            e.name,
            ":"
          ] }),
          (() => {
            if (e.renderEditCell && b === e.key)
              return /* @__PURE__ */ t(V, { ownerState: { size: E }, children: e.renderEditCell({
                column: r,
                row: i,
                rowIdx: d,
                /**
                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
                 */
                onRowChange: (s) => {
                  if (l) {
                    const y = o.map(
                      (u, S) => S === n ? s : u
                    );
                    l(y, {
                      indexes: [n],
                      column: r
                    });
                  }
                },
                onClose: () => c(null)
              }) });
            if (e.renderCell) {
              const s = e.renderCell({
                column: e,
                row: i,
                rowIdx: d,
                isCellSelected: !1,
                tabIndex: -1,
                /**
                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
                 */
                onRowChange: (y) => {
                  if (l) {
                    const u = o.map(
                      (S, I) => I === n ? y : S
                    );
                    l(u, {
                      indexes: [n],
                      column: r
                    });
                  }
                }
              });
              return /* @__PURE__ */ t(h, { ownerState: {}, variant: "bodyStandard", color: "text.primary", children: s });
            }
            const a = i[e.key], m = a == null || a === "";
            return e.renderEditCell ? /* @__PURE__ */ p(W, { ownerState: {}, children: [
              /* @__PURE__ */ t(
                h,
                {
                  ownerState: {},
                  variant: "bodyStandard",
                  color: m ? "text.secondary" : "text.primary",
                  children: m ? x(z.EDIT_PLACEHOLDER) : a
                }
              ),
              /* @__PURE__ */ t(
                j,
                {
                  ownerState: {},
                  icon: /* @__PURE__ */ t(P, {}),
                  onClick: () => {
                    c(e.key);
                  },
                  size: D,
                  role: "button",
                  "aria-label": "Editar texto"
                }
              )
            ] }) : /* @__PURE__ */ t(h, { ownerState: {}, variant: "bodyStandard", color: "text.primary", children: a ?? "-" });
          })()
        ]
      }
    ) }, A);
  }) });
}
export {
  U as CardDetails
};
