"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "EditableCell", {
    enumerable: true,
    get: function() {
        return EditableCell;
    }
});
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _reacttable = require("@tanstack/react-table");
const _hooks = require("../../../../hooks");
const _Tablestyles = require("../../Table.styles");
const _utils = require("../../utils");
const _Icon = require("../../../_Icon");
const _HeadCell = require("../HeadCell/HeadCell");
const _Tabletokens = require("../../Table.tokens");
const _EditableCellstyles = require("./EditableCell.styles");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
const keys = {
    Enter: 'Enter',
    Tab: 'Tab',
    Escape: 'Escape'
};
const EditableCell = ({ size, view, cell, borderVariant, table, selected, additionalProps, className })=>{
    const [value, setValue] = (0, _react.useState)(cell.getValue());
    const [editingMode, setEditingMode] = (0, _react.useState)(false);
    const updateData = table.options.meta?.updateData;
    const ref = (0, _react.useRef)(null);
    (0, _hooks.useOutsideClick)(()=>{
        setEditingMode(false);
    }, [
        ref
    ]);
    const handleEditClick = (e)=>{
        e.stopPropagation();
        setEditingMode(true);
        setValue(cell.getValue());
    };
    const handleChange = (e)=>setValue(e.target.value);
    const handleReset = ()=>{
        setValue(cell.getValue());
    };
    const handleSubmit = (e)=>{
        e.stopPropagation();
        if (updateData) {
            updateData(cell.row.id, cell.column.id, value);
        }
        setEditingMode(false);
    };
    const 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;
                }
            default:
                {
                    break;
                }
        }
    };
    return /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Td, {
        key: cell.id,
        borderVariant: borderVariant,
        selectionCell: cell.column.id === _utils.SELECT_COLUMN_ID,
        onClick: handleEditClick,
        editingMode: editingMode,
        selected: selected,
        view: view,
        ref: ref,
        className: className,
        ...additionalProps
    }, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InnerWrapper, null, editingMode ? /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.EditModeWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InputWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Input, {
        value: value,
        onChange: handleChange,
        autoFocus: true,
        onKeyDown: handleKeyDown
    }), /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.IconResetButton, {
        onClick: handleReset,
        tabIndex: -1
    }, /*#__PURE__*/ _react.default.createElement(_Icon.IconResetOutline, {
        size: (0, _HeadCell.getIconSize)(size)
    }))), /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.IconDoneButton, {
        onClick: handleSubmit,
        tabIndex: -1
    }, /*#__PURE__*/ _react.default.createElement(_Icon.IconDoneCircleOutline, {
        size: (0, _HeadCell.getIconSize)(size)
    }))) : /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.ContentWrapper, null, (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/ _react.default.createElement(_Icon.IconEditOutline, {
        size: "xs",
        className: _Tabletokens.classes.editIcon,
        color: "var(--text-secondary)"
    }))), cell.column.getIsResizing() && /*#__PURE__*/ _react.default.createElement(_Tablestyles.Resizer, {
        isResizing: true
    }));
};
