import { slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useRef } from 'react';
import { flexRender } from '@tanstack/react-table';
import { Resizer } from '../../Table.styles.js';
import { IconEditOutline } from '../../../_Icon/Icons/IconEditOutline.js';
import { IconResetOutline } from '../../../_Icon/Icons/IconResetOutline.js';
import { IconDoneCircleOutline } from '../../../_Icon/Icons/IconDoneCircleOutline.js';
import { getIconSize } from '../HeadCell/HeadCell.js';
import { classes } from '../../Table.tokens.js';
import { Td, InnerWrapper, EditModeWrapper, InputWrapper, Input, IconResetButton, IconDoneButton, ContentWrapper } from './EditableCell.styles.js';
import { useOutsideClick } from '../../../../hooks/useOutsideClick.js';
import { SELECT_COLUMN_ID } from '../../utils/constants.js';

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 = useState(cell.getValue()),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _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 = useRef(null);
  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.createElement(Td, _extends({
    key: cell.id,
    borderVariant: borderVariant,
    selectionCell: cell.column.id === SELECT_COLUMN_ID,
    onClick: handleEditClick,
    editingMode: editingMode,
    selected: selected,
    view: view,
    ref: ref,
    className: className
  }, additionalProps), /*#__PURE__*/React__default.createElement(InnerWrapper, null, editingMode ? /*#__PURE__*/React__default.createElement(EditModeWrapper, null, /*#__PURE__*/React__default.createElement(InputWrapper, null, /*#__PURE__*/React__default.createElement(Input, {
    value: value,
    onChange: handleChange,
    autoFocus: true,
    onKeyDown: handleKeyDown
  }), /*#__PURE__*/React__default.createElement(IconResetButton, {
    onClick: handleReset,
    tabIndex: -1
  }, /*#__PURE__*/React__default.createElement(IconResetOutline, {
    size: getIconSize(size)
  }))), /*#__PURE__*/React__default.createElement(IconDoneButton, {
    onClick: handleSubmit,
    tabIndex: -1
  }, /*#__PURE__*/React__default.createElement(IconDoneCircleOutline, {
    size: getIconSize(size)
  }))) : /*#__PURE__*/React__default.createElement(ContentWrapper, null, flexRender(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/React__default.createElement(IconEditOutline, {
    size: "xs",
    className: classes.editIcon,
    color: "var(--text-secondary)"
  }))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/React__default.createElement(Resizer, {
    isResizing: true
  }))));
};

export { EditableCell };
