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

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

/**
 * 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.
 */
@observer
export class CollectionNoteTakingViewDivider extends ObservableReactComponent<DividerProps> {
    @observable private isResizingActive = false;

    @action
    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
        let batch: UndoManager.Batch | undefined;
        setupMoveUpEvents(
            this,
            e,
            (moveEv, down, delta) => {
                if (!batch) batch = UndoManager.StartBatch('resizing');
                this._props.setColumnStartXCoords(delta[0], this._props.index);
                return false;
            },
            action(() => {
                this.isResizingActive = false;
                batch?.end();
            }),
            emptyFunction
        );
        this.isResizingActive = true;
    };

    render() {
        return (
            <div
                className="columnResizer"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'col-resize',
                    pointerEvents: this._props.isContentActive() ? 'all' : 'none',
                }}>
                <div
                    className="columnResizer-handler"
                    onPointerDown={e => this.registerResizing(e)}
                    style={{
                        height: '95%',
                        width: 12,
                        borderRight: '4px solid #282828',
                        borderLeft: '4px solid #282828',
                        position: 'fixed',
                        pointerEvents: 'none',
                    }}
                />
                <div
                    className="columnResizer-handler"
                    onPointerDown={e => this.registerResizing(e)}
                    style={{
                        height: '95%',
                        width: 12,
                        borderRight: '4px solid #282828',
                        borderLeft: '4px solid #282828',
                    }}
                />
            </div>
        );
    }
}