import { action, observable } from 'mobx';
import * as React from 'react';
import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
import { UndoManager } from '../../util/UndoManager';

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

/**
 * CollectionNoteTakingViewDivider are dividers between CollectionNoteTakingViewColumns,
 * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
 * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
 */
export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
    @observable private isHoverActive = false;
    @observable private isResizingActive = false;

    @action
    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
        const batch = UndoManager.StartBatch('resizing');
        setupMoveUpEvents(
            this,
            e,
            (e, down, delta) => {
                this.props.setColumnStartXCoords(delta[0], this.props.index);
                return false;
            },
            action(() => {
                this.isResizingActive = false;
                this.isHoverActive = false;
                batch.end();
            }),
            emptyFunction
        );
        this.isResizingActive = true;
    };

    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',
                    }}
                />
            </div>
        );
    }
}