'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var reactTable = require('@tanstack/react-table');
var Table_styles = require('../../Table.styles.js');
var IconEditOutline = require('../../../_Icon/Icons/IconEditOutline.js');
var IconResetOutline = require('../../../_Icon/Icons/IconResetOutline.js');
var IconDoneCircleOutline = require('../../../_Icon/Icons/IconDoneCircleOutline.js');
var HeadCell = require('../HeadCell/HeadCell.js');
var Table_tokens = require('../../Table.tokens.js');
var EditableCell_styles = require('./EditableCell.styles.js');
var useOutsideClick = require('../../../../hooks/useOutsideClick.js');
var constants = require('../../utils/constants.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _Resizer;
var keys = {
  Enter: 'Enter',
  Tab: 'Tab',
  Escape: 'Escape'
};
var EditableCell = function EditableCell(_ref) {
  var _table$options$meta;
  var size = _ref.size,
    view = _ref.view,
    cell = _ref.cell,
    borderVariant = _ref.borderVariant,
    table = _ref.table,
    selected = _ref.selected,
    additionalProps = _ref.additionalProps,
    className = _ref.className;
  var _useState = React.useState(cell.getValue()),
    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = React.useState(false),
    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
    editingMode = _useState4[0],
    setEditingMode = _useState4[1];
  var updateData = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.updateData;
  var ref = React.useRef(null);
  useOutsideClick.useOutsideClick(function () {
    setEditingMode(false);
  }, [ref]);
  var handleEditClick = function handleEditClick(e) {
    e.stopPropagation();
    setEditingMode(true);
    setValue(cell.getValue());
  };
  var handleChange = function handleChange(e) {
    return setValue(e.target.value);
  };
  var handleReset = function handleReset() {
    setValue(cell.getValue());
  };
  var handleSubmit = function handleSubmit(e) {
    e.stopPropagation();
    if (updateData) {
      updateData(cell.row.id, cell.column.id, value);
    }
    setEditingMode(false);
  };
  var handleKeyDown = function handleKeyDown(event) {
    switch (event.code) {
      case keys.Enter:
        {
          if (updateData) {
            updateData(cell.row.id, cell.column.id, value);
          }
          setEditingMode(false);
          break;
        }
      case keys.Escape:
      case keys.Tab:
        {
          setEditingMode(false);
          break;
        }
    }
  };
  return /*#__PURE__*/React__default.default.createElement(EditableCell_styles.Td, _rollupPluginBabelHelpers.extends({
    key: cell.id,
    borderVariant: borderVariant,
    selectionCell: cell.column.id === constants.SELECT_COLUMN_ID,
    onClick: handleEditClick,
    editingMode: editingMode,
    selected: selected,
    view: view,
    ref: ref,
    className: className
  }, additionalProps), /*#__PURE__*/React__default.default.createElement(EditableCell_styles.InnerWrapper, null, editingMode ? /*#__PURE__*/React__default.default.createElement(EditableCell_styles.EditModeWrapper, null, /*#__PURE__*/React__default.default.createElement(EditableCell_styles.InputWrapper, null, /*#__PURE__*/React__default.default.createElement(EditableCell_styles.Input, {
    value: value,
    onChange: handleChange,
    autoFocus: true,
    onKeyDown: handleKeyDown
  }), /*#__PURE__*/React__default.default.createElement(EditableCell_styles.IconResetButton, {
    onClick: handleReset,
    tabIndex: -1
  }, /*#__PURE__*/React__default.default.createElement(IconResetOutline.IconResetOutline, {
    size: HeadCell.getIconSize(size)
  }))), /*#__PURE__*/React__default.default.createElement(EditableCell_styles.IconDoneButton, {
    onClick: handleSubmit,
    tabIndex: -1
  }, /*#__PURE__*/React__default.default.createElement(IconDoneCircleOutline.IconDoneCircleOutline, {
    size: HeadCell.getIconSize(size)
  }))) : /*#__PURE__*/React__default.default.createElement(EditableCell_styles.ContentWrapper, null, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/React__default.default.createElement(IconEditOutline.IconEditOutline, {
    size: "xs",
    className: Table_tokens.classes.editIcon,
    color: "var(--text-secondary)"
  }))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/React__default.default.createElement(Table_styles.Resizer, {
    isResizing: true
  }))));
};

exports.EditableCell = EditableCell;
