"use strict";

exports.__esModule = true;
exports.EditableCell = void 0;
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _EditableCellStCss = require("./EditableCell.st.css.js");
var _useCellFocusAndEditing = require("./useCellFocusAndEditing");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/EditableTable/EditableCell.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _EditableCell({
  state,
  rowKey,
  columnId
}) {
  var _cellValidation$error;
  const {
    cellInteraction,
    clipboard
  } = state;
  const cellRef = (0, _react.useRef)(null);
  const editInputRef = (0, _react.useRef)();
  const column = state._columnMap.get(columnId);
  const keyedItem = state._getKeyedItem(rowKey);
  const resolved = column ? state.resolveCellTypeByColumnId(column.id) : null;
  const value = state.getCellDisplayValue(rowKey, columnId);
  const cellValidation = state.getCellValidation(rowKey, columnId);
  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
  const isSelected = cellInteraction.isCellSelected(rowKey, columnId);
  const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
  const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
  const isEditable = state.isCellEditable(rowKey, columnId);
  const handleClick = (0, _react.useCallback)(e => {
    e.stopPropagation();
    state.handleCellClick(rowKey, columnId, e.shiftKey);
  }, [state, rowKey, columnId]);
  const handleDoubleClick = (0, _react.useCallback)(e => {
    e.stopPropagation();
    e.preventDefault();
    state.handleCellDoubleClick(rowKey, columnId);
  }, [state, rowKey, columnId]);

  // Auto-start edit if onChange fires before explicit startEdit (e.g., onOptionMarked
  // in select). startEdit resets editingValue, so it must come before setEditingValue.
  // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
  const handleChange = (0, _react.useCallback)(newValue => {
    if (!cellInteraction.isEditing) {
      cellInteraction.startEdit(rowKey, columnId, 'enter');
    }
    cellInteraction.setEditingValue(newValue);
  }, [cellInteraction, rowKey, columnId]);
  const handleCommit = (0, _react.useCallback)(() => cellInteraction.commitEdit(), [cellInteraction]);
  const handleCancel = (0, _react.useCallback)(() => cellInteraction.cancelEdit(), [cellInteraction]);
  const handleStartEdit = (0, _react.useCallback)(() => {
    if (!cellInteraction.isEditing) {
      cellInteraction.startEdit(rowKey, columnId);
    }
  }, [cellInteraction, rowKey, columnId]);
  const cellKeyboard = (0, _useCellFocusAndEditing.useCellFocusAndEditing)({
    state,
    rowKey,
    columnId,
    cellRef,
    editInputRef
  });
  if (!column || !keyedItem || !resolved) {
    return null;
  }
  const {
    ViewComponent,
    EditComponent
  } = resolved;
  const showValidationIndicator = !cellValidation.valid && !isEditing;
  const showEdit = (isEditing || isFocused && isEditable && !state.updateItemDisabled && (!!resolved.toggleValue || !!resolved.showEditWhenFocused)) && EditComponent;
  const cellContent = showEdit ? /*#__PURE__*/_react.default.createElement(EditComponent, {
    value: cellInteraction.editingValue !== undefined ? cellInteraction.editingValue : value,
    onChange: handleChange,
    onCommit: handleCommit,
    onCancel: handleCancel,
    onStartEdit: handleStartEdit,
    inputRef: editInputRef,
    typeConfig: column.typeConfig,
    editTrigger: cellInteraction.editTrigger,
    validation: column.validation,
    columnId: columnId,
    rowKey: rowKey,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 5
    }
  }) : /*#__PURE__*/_react.default.createElement(ViewComponent, {
    value: value,
    typeConfig: column.typeConfig,
    validation: column.validation,
    columnId: columnId,
    rowKey: rowKey,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 5
    }
  });

  // The cell type's EditWrapper (if any) stays mounted across the edit↔view
  // swap, so it can own behavior that must outlive the inline editor.
  const EditWrapper = resolved.EditWrapper;
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: cellRef,
    className: (0, _EditableCellStCss.st)(_EditableCellStCss.classes.root, {
      editing: isEditing,
      focused: isFocused,
      selected: isSelected,
      invalid: !cellValidation.valid,
      typeToEdit: !!resolved.onTypeToEdit,
      showEditWhenFocused: !!resolved.showEditWhenFocused,
      growable: !!resolved.growable,
      selectionTop: selectionBorder.top,
      selectionBottom: selectionBorder.bottom,
      selectionLeft: selectionBorder.left,
      selectionRight: selectionBorder.right,
      copiedTop: copiedBorder.top,
      copiedBottom: copiedBorder.bottom,
      copiedLeft: copiedBorder.left,
      copiedRight: copiedBorder.right
    }),
    onClick: handleClick,
    onDoubleClick: handleDoubleClick,
    onKeyDown: cellKeyboard.onKeyDown,
    role: "gridcell",
    "aria-selected": isSelected,
    "aria-readonly": !isEditable,
    "aria-invalid": !cellValidation.valid || undefined,
    tabIndex: isFocused ? 0 : -1,
    "data-row-key": rowKey,
    "data-column-id": columnId,
    "data-editing": isEditing || undefined,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 5
    }
  }, showValidationIndicator && /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
    content: (_cellValidation$error = cellValidation.errors) == null ? void 0 : _cellValidation$error.join(', '),
    appendTo: "window",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 173,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    "data-hook": "validation-indicator",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 174,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarningFilledSmall, {
    className: _EditableCellStCss.classes.validationIndicator,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 175,
      columnNumber: 13
    }
  }))), EditWrapper ? /*#__PURE__*/_react.default.createElement(EditWrapper, {
    typeConfig: column.typeConfig,
    columnId: columnId,
    rowKey: rowKey,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180,
      columnNumber: 9
    }
  }, cellContent) : cellContent);
}
const EditableCell = exports.EditableCell = (0, _mobxReactLite.observer)(_EditableCell);
//# sourceMappingURL=EditableCell.js.map