import * as React from 'react';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { color, css, datagrid, MeasureSize, ObjectView, time } from '../common';
const PADDING = 10;
export class DebugEditor extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {};
        this.unmounted$ = new Subject();
        this.state$ = new Subject();
        this.inputRef = (ref) => (this.input = ref);
        this.handleChange = (e) => {
            const value = e.target.value;
            this.state$.next({ value });
            time.delay(0, () => this.updateSize());
        };
    }
    componentDidMount() {
        let isMounted = false;
        const state$ = this.state$.pipe(takeUntil(this.unmounted$));
        state$.subscribe((e) => this.setState(e));
        const keys$ = this.context.keys$;
        keys$
            .pipe(filter(() => isMounted), filter((e) => e.isEnter), filter((e) => e.metaKey))
            .subscribe((e) => {
            this.context.complete();
        });
        state$.subscribe((e) => {
            this.context.set({ value: this.value });
        });
        const value = this.context.cell.data.value;
        this.state$.next({ value });
        time.delay(100, () => (isMounted = true));
        this.input.focus();
        this.input.select();
        this.updateSize();
    }
    componentWillUnmount() {
        this.unmounted$.next();
    }
    get value() {
        return (this.state.value || '').toString();
    }
    updateSize() {
        const content = React.createElement("div", Object.assign({}, STYLES.inputText), this.state.value);
        const textSize = MeasureSize.measure({ content, style: STYLES.input });
        const textWidth = textSize.width;
        const cell = this.context.cell;
        const rightCell = cell.siblings.right;
        const width = cell.width + (rightCell ? rightCell.width : 0) - PADDING * 2 - 10;
        this.state$.next({ textWidth, width });
    }
    render() {
        const styles = {
            base: css({
                boxSizing: 'border-box',
                backgroundColor: 'rgba(255, 0, 0, 0.1)',
                padding: PADDING,
                borderRadius: 4,
                border: `solid 1px ${color.format(-0.1)}`,
                width: this.state.width,
                Flex: 'vertical-stetch-stretch',
            }),
            input: css({
                outline: 'none',
                marginBottom: 4,
            }),
        };
        const data = {
            textWidth: this.state.textWidth,
            context: this.context,
        };
        return (React.createElement("div", Object.assign({}, css(styles.base, this.props.style)),
            React.createElement("input", Object.assign({}, css(STYLES.inputText, styles.input), { ref: this.inputRef, value: this.value, onChange: this.handleChange })),
            React.createElement(ObjectView, { name: 'editor', data: data, fontSize: 9 })));
    }
}
DebugEditor.contextType = datagrid.EditorContext;
const STYLES = {
    inputText: css({
        fontSize: 14,
    }),
    input: css({
        boxSizing: 'border-box',
        outline: 'none',
        marginBottom: 4,
    }),
};
