import * as React from 'react';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
/**
 * Wraps an item in a flexbox and makes it resizable.
 */
export class Resizable extends React.PureComponent {
    constructor(props) {
        super(props);
        this.sizeUpdates = new Subject();
        this.subscriptions = new Subscription();
        this.containerRef = null;
        this.ghostRef = null;
        this.setContainerRef = (e) => (this.containerRef = e);
        this.setGhostRef = (e) => (this.ghostRef = e);
        this.onMouseDown = (e) => {
            e.preventDefault();
            if (!this.state.resizing) {
                this.setState({ resizing: true });
            }
        };
        this.onMouseUp = (e) => {
            e.preventDefault();
            if (this.state.resizing) {
                this.setState({ resizing: false });
            }
        };
        this.onMouseMove = (e) => {
            e.preventDefault();
            if (this.state.resizing && this.containerRef) {
                let size = this.props.handlePosition === 'right'
                    ? e.pageX - this.containerRef.getBoundingClientRect().left
                    : this.containerRef.getBoundingClientRect().bottom - e.pageY;
                if (e.shiftKey) {
                    size = Math.ceil(size / 20) * 20;
                }
                this.setState({ size });
                this.sizeUpdates.next(size);
            }
        };
        this.state = {
            resizing: false,
            size: this.getSize(),
        };
    }
    getSize() {
        const v = localStorage.getItem(`${Resizable.STORAGE_KEY_PREFIX}${this.props.storageKey}`);
        if (v !== null) {
            const n = parseInt(v, 10);
            if (n >= 0) {
                return n;
            }
        }
        return this.props.defaultSize;
    }
    setSize(size) {
        localStorage.setItem(`${Resizable.STORAGE_KEY_PREFIX}${this.props.storageKey}`, String(size));
    }
    componentDidMount() {
        this.subscriptions.add(this.sizeUpdates
            .pipe(distinctUntilChanged(), debounceTime(250))
            .subscribe(size => this.setSize(size)));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: `resizable resizable--${this.props.handlePosition} ${this.props.className || ''}`, ref: this.setContainerRef, 
            // tslint:disable-next-line jsx-ban-props
            style: { [this.props.handlePosition === 'right' ? 'width' : 'height']: `${this.state.size}px` } },
            React.createElement("div", { className: `resizable__ghost ${this.state.resizing ? 'resizable__ghost--resizing' : ''}`, ref: this.setGhostRef, onMouseMove: this.onMouseMove, onMouseUp: this.onMouseUp }),
            this.props.element,
            React.createElement("div", { className: `resizable__handle resizable__handle--${this.props.handlePosition} ${this.state.resizing ? 'resizable__handle--resizing' : ''}`, onMouseDown: this.onMouseDown })));
    }
}
Resizable.STORAGE_KEY_PREFIX = 'Resizable:';
//# sourceMappingURL=Resizable.js.map