import { action, observable } from 'mobx';
import * as React from 'react';

interface DividerProps {
    index: number;
    xMargin: number;
    setColumnStartXCoords: (movementX: number, colIndex: number) => void;
}

export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
    @observable private isHoverActive = false;
    @observable private isResizingActive = false;

    @action
    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
        e.stopPropagation();
        e.preventDefault();
        window.removeEventListener('pointermove', this.onPointerMove);
        window.removeEventListener('pointerup', this.onPointerUp);
        window.addEventListener('pointermove', this.onPointerMove);
        window.addEventListener('pointerup', this.onPointerUp);
        this.isResizingActive = true;
    };

    @action
    private onPointerUp = () => {
        this.isResizingActive = false;
        this.isHoverActive = false;
        window.removeEventListener('pointermove', this.onPointerMove);
        window.removeEventListener('pointerup', this.onPointerUp);
    };

    @action
    onPointerMove = ({ movementX }: PointerEvent) => {
        this.props.setColumnStartXCoords(movementX, this.props.index);
    };

    render() {
        return (
            <div
                className="columnResizer"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'col-resize',
                }}
                onPointerEnter={action(() => (this.isHoverActive = true))}
                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
                <div
                    className="columnResizer-handler"
                    onPointerDown={e => this.registerResizing(e)}
                    style={{
                        height: '95%',
                        width: 12,
                        borderRight: '4px solid #282828',
                        borderLeft: '4px solid #282828',
                        margin: '0px 10px',
                    }}
                />
            </div>
        );
    }
}