import React, { useState, useRef } from "react";
import { flexRender } from "@tanstack/react-table";
import { useOutsideClick } from "../../../../hooks";
import { Resizer } from "../../Table.styles";
import { SELECT_COLUMN_ID } from "../../utils";
import { IconEditOutline, IconResetOutline, IconDoneCircleOutline } from "../../../_Icon";
import { getIconSize } from "../HeadCell/HeadCell";
import { classes } from "../../Table.tokens";
import { ContentWrapper, Td, IconDoneButton, Input, InnerWrapper, InputWrapper, EditModeWrapper, IconResetButton } from "./EditableCell.styles";
const keys = {
    Enter: 'Enter',
    Tab: 'Tab',
    Escape: 'Escape'
};
export const EditableCell = ({ size, view, cell, borderVariant, table, selected, additionalProps, className })=>{
    const [value, setValue] = useState(cell.getValue());
    const [editingMode, setEditingMode] = useState(false);
    const updateData = table.options.meta?.updateData;
    const ref = useRef(null);
    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.createElement(Td, {
        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.createElement(InnerWrapper, null, editingMode ? /*#__PURE__*/ React.createElement(EditModeWrapper, null, /*#__PURE__*/ React.createElement(InputWrapper, null, /*#__PURE__*/ React.createElement(Input, {
        value: value,
        onChange: handleChange,
        autoFocus: true,
        onKeyDown: handleKeyDown
    }), /*#__PURE__*/ React.createElement(IconResetButton, {
        onClick: handleReset,
        tabIndex: -1
    }, /*#__PURE__*/ React.createElement(IconResetOutline, {
        size: getIconSize(size)
    }))), /*#__PURE__*/ React.createElement(IconDoneButton, {
        onClick: handleSubmit,
        tabIndex: -1
    }, /*#__PURE__*/ React.createElement(IconDoneCircleOutline, {
        size: getIconSize(size)
    }))) : /*#__PURE__*/ React.createElement(ContentWrapper, null, flexRender(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/ React.createElement(IconEditOutline, {
        size: "xs",
        className: classes.editIcon,
        color: "var(--text-secondary)"
    }))), cell.column.getIsResizing() && /*#__PURE__*/ React.createElement(Resizer, {
        isResizing: true
    }));
};
