"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptablePercentageEditor = exports.AdaptableReactPercentageEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
const InternalAdaptablePercentageEditor_1 = require("./InternalAdaptablePercentageEditor");
const react_1 = require("react");
const AdaptableNumberEditor_1 = require("../AdaptableNumberEditor");
const NumberExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/NumberExtensions"));
const defaultValueParser = ({ newValue, oldValue: _ }) => {
    return newValue;
};
const style = {
    position: 'absolute',
    top: '0px',
    left: '0px',
    right: '0px',
    bottom: '0px',
};
exports.AdaptableReactPercentageEditor = (0, react_1.forwardRef)((props, ref) => {
    const [initialValue] = (0, react_1.useState)(() => NumberExtensions_1.default.timesBy100((0, AdaptableNumberEditor_1.getStartValue)(props)));
    const valueRef = (0, react_1.useRef)(initialValue);
    const columnId = props.column.getColId();
    const adaptable = props.context.__adaptable;
    const colValueParser = props.column.getColDef().valueParser;
    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
    function onValueChange(value) {
        const newValue = valueParser
            ? valueParser({
                ...props,
                oldValue: props.value,
                newValue: value,
            })
            : value;
        valueRef.current = newValue;
        props.onValueChange?.(NumberExtensions_1.default.divideBy100(newValue));
    }
    const editorRef = (0, react_1.useRef)(null);
    (0, react_1.useImperativeHandle)(ref, () => {
        return {
            focusIn() {
                editorRef.current?.focus();
            },
            // the final value to send to the grid, on completion of editing
            getValue() {
                return NumberExtensions_1.default.divideBy100(valueRef.current);
            },
        };
    });
    const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: props.showClearButton ?? true, emptyValue: props.emptyValue ?? '', onValueChange: onValueChange, ref: (editor) => {
            editorRef.current = editor;
            editor?.focus();
        } }));
    function onKeyDown(keyDownEvent) {
        adaptable._emit('CellEditorKeyDown', {
            keyDownEvent,
            cellValue: valueRef.current,
            columnId,
            updateValueCallback: (updatedValue) => {
                editorRef.current.setValue(updatedValue);
            },
        });
    }
    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
});
exports.AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
/**
 * Used to edit percentage columns as percentages (similar to how its done in Excel)
 */
class AdaptablePercentageEditor {
    value;
    columnId;
    el;
    params;
    editor;
    valueParser = defaultValueParser;
    unmountReactRoot;
    init(params) {
        this.value = (0, AdaptableNumberEditor_1.getStartValue)(params);
        this.params = params;
        this.columnId = params.column.getColId();
        const { valueParser } = params.column.getColDef();
        if (typeof valueParser === 'function') {
            this.valueParser = valueParser;
        }
        this.el = document.createElement('div');
        Object.keys(style).forEach((key) => {
            //@ts-ignore
            this.el.style[key] = style[key];
        });
    }
    /* Component Editor Lifecycle methods */
    // gets called once when grid ready to insert the element
    getGui() {
        return this.el;
    }
    // the final value to send to the grid, on completion of editing
    getValue() {
        return this.value;
    }
    focusIn() {
        this.editor?.focus();
    }
    focusOut() { }
    // after this component has been created and inserted into the grid
    afterGuiAttached() {
        const adaptable = this.params.context.__adaptable;
        const defaultValue = NumberExtensions_1.default.timesBy100(this.value);
        const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: this.params.showClearButton ?? true, emptyValue: this.params.emptyValue ?? '', onValueChange: this.onValueChange, ref: (editor) => {
                this.editor = editor;
                editor?.focus();
            } }));
        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
        this.getGui().addEventListener('keydown', (keyDownEvent) => {
            adaptable._emit('CellEditorKeyDown', {
                keyDownEvent,
                cellValue: this.value,
                columnId: this.columnId,
                updateValueCallback: (updatedValue) => {
                    this.editor.setValue(updatedValue);
                },
            });
        });
    }
    destroy() {
        this.unmountReactRoot?.();
    }
    onValueChange = (value) => {
        const newValue = this.valueParser
            ? this.valueParser({
                ...this.params,
                oldValue: this.params.value,
                newValue: value,
            })
            : value;
        this.value = NumberExtensions_1.default.divideBy100(newValue);
    };
}
exports.AdaptablePercentageEditor = AdaptablePercentageEditor;
