"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
/**
 * Default cell editor
 * @param props
 */
const DefaultEditor = (props) => {
    const { rowIndex, columnIndex, onChange, onSubmit, scrollPosition, position, onHide, ...rest } = props;
    const inputRef = react_1.useRef(null);
    react_1.useEffect(() => {
        if (!inputRef.current)
            return;
        inputRef.current.focus();
        inputRef.current.select();
    }, []);
    return (react_1.default.createElement("input", Object.assign({ type: "text", ref: inputRef, style: {
            position: "absolute",
            top: position.y,
            left: position.x,
            transform: `translate3d(-${scrollPosition.scrollLeft}px, -${scrollPosition.scrollTop}px, 0)`,
            width: position.width,
            height: position.height,
            padding: "0 3px",
            margin: 0,
            boxSizing: "border-box",
            border: "1px rgba(66, 133, 244, 1) solid",
            outline: "none",
        }, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
            // Enter key
            if (e.which === 13) {
                onSubmit && onSubmit();
            }
        }, onBlur: () => onHide() }, rest)));
};
const getDefaultEditor = (cell) => DefaultEditor;
/**
 * Hook to make grid editable
 * @param param
 */
const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, }) => {
    const [activeCell, setActiveCell] = react_1.useState(null);
    const [value, setValue] = react_1.useState("");
    const getValueRef = react_1.useRef(getValue);
    const [position, setPosition] = react_1.useState({
        x: 0,
        y: 0,
        width: 0,
        height: 0,
    });
    const [scrollPosition, setScrollPosition] = react_1.useState({
        scrollLeft: 0,
        scrollTop: 0,
    });
    /* Update the valueref when dependencies change */
    getValueRef.current = getValue;
    /* Activate edit mode */
    const handleDoubleClick = react_1.useCallback((e) => {
        const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffsets(e.clientX, e.clientY);
        const activeCell = { rowIndex, columnIndex };
        if (!gridRef.current)
            return;
        const pos = gridRef.current.getCellOffsetFromCoords(activeCell);
        setActiveCell(activeCell);
        setValue(getValueRef.current(activeCell) || "");
        setPosition(pos);
    }, []);
    /* Save scroll position to align the input */
    const handleScroll = react_1.useCallback(setScrollPosition, []);
    /* Save the value */
    const handleSubmit = react_1.useCallback(() => {
        if (!activeCell)
            return;
        onChange && onChange(value, activeCell);
        setActiveCell(null);
    }, [value, activeCell]);
    /* When the input is blurred out */
    const handleHide = react_1.useCallback(() => {
        setActiveCell(null);
    }, []);
    /* Editor */
    const Editor = react_1.useMemo(() => getEditor(activeCell), [activeCell]);
    const editorComponent = activeCell ? (react_1.default.createElement(Editor, { value: value, onChange: setValue, onSubmit: handleSubmit, position: position, scrollPosition: scrollPosition, onHide: handleHide })) : null;
    return {
        editorComponent,
        onDoubleClick: handleDoubleClick,
        onScroll: handleScroll,
    };
};
exports.default = useEditable;
