import React = require('react');
import { action, computed, observable, ObservableSet } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
import { listSpec } from '../../../../fields/Schema';
import { Cast } from '../../../../fields/Types';
import { DragManager } from '../../../util/DragManager';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionSchemaView.scss';
import { SchemaColumnHeader } from './SchemaColumnHeader';
import { SchemaRowBox } from './SchemaRowBox';

export enum ColumnType {
    Number,
    String,
    Boolean,
    Doc,
    Image,
}

const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', 'tags'];

@observer
export class CollectionSchemaView extends CollectionSubView() {
    private _ref: HTMLDivElement | null = null;
    private _lastSelectedRow: number | undefined;
    private _selectedDocSortedArray: Doc[] = [];
    private _closestDropIndex: number = 0;

    @observable _rowMenuWidth: number = 100;
    @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>();
    @observable _isDragging: boolean = false;

    @computed get columnKeys() {
        return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys);
    }

    @computed get columnWidths() {
        return Cast(
            this.props.Document.columnWidths,
            listSpec('number'),
            this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length)
        );
    }

    @action
    changeColumnKey = (index: number, newKey: string) => {
        let currKeys = this.columnKeys;
        currKeys[index] = newKey;
        this.layoutDoc.columnKeys = new List<string>(currKeys);
        return true;
    };

    @action
    selectRow = (e: React.PointerEvent, doc: Doc, index: number) => {
        const ctrl = e.ctrlKey || e.metaKey;
        const shift = e.shiftKey;
        if (shift && this._lastSelectedRow !== undefined) {
            const startRow = Math.min(this._lastSelectedRow, index);
            const endRow = Math.max(this._lastSelectedRow, index);
            for (let i = startRow; i <= endRow; i++) {
                const currDoc: Doc = this.childDocs[i];
                if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
            }
            this._lastSelectedRow = endRow;
        } else if (ctrl) {
            if (!this._selectedDocs.has(doc)) {
                this._selectedDocs.add(doc);
                this._lastSelectedRow = index;
            } else {
                this._selectedDocs.delete(doc);
            }
        } else {
            this._selectedDocs.clear();
            this._selectedDocs.add(doc);
            this._lastSelectedRow = index;
        }
    };

    @action
    sortedSelectedDocs = (): Doc[] => {
        return this.childDocs.filter(doc => this._selectedDocs.has(doc));
    };

    setDropIndex = (index: number) => {
        this._closestDropIndex = index;
    };

    @action
    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
        if (super.onInternalDrop(e, de)) {
            this._isDragging = false;
            const pushedDocs: Doc[] = this.childDocs.filter((doc: Doc, index: number) => index >= this._closestDropIndex && !this._selectedDocs.has(doc));
            this.props.removeDocument?.(pushedDocs);
            this.props.removeDocument?.(this._selectedDocSortedArray);
            this.addDocument(this._selectedDocSortedArray);
            this.addDocument(pushedDocs);
            return true;
        }
        return false;
    };

    @action
    startDrag = (e: React.PointerEvent, doc: Doc) => {
        if (!this._selectedDocs.has(doc)) {
            this._selectedDocs.clear();
            this._selectedDocs.add(doc);
        }
        this._isDragging = true;
        this._selectedDocSortedArray = this.sortedSelectedDocs();
        const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move');
        dragData.moveDocument = this.props.moveDocument;
        const dragItem: HTMLElement[] = [];
        const dragDiv = document.createElement('div');
        dragDiv.className = 'presItem-multiDrag';
        dragDiv.innerText = 'Move ' + this._selectedDocs.size + '  row' + (this._selectedDocs.size > 1 ? 's' : '');
        dragDiv.style.position = 'absolute';
        dragDiv.style.top = e.clientY + 'px';
        dragDiv.style.left = e.clientX - 50 + 'px';
        dragItem.push(dragDiv);

        DragManager.StartDocumentDrag(
            dragItem.map(ele => ele),
            dragData,
            e.clientX,
            e.clientY,
            undefined
        );
        return true;
    };

    render() {
        return (
            <div
                className="collectionSchemaView"
                ref={(ele: HTMLDivElement | null) => {
                    this._ref = ele;
                    this.createDashEventsTarget(ele);
                }}
                onPointerDown={() => this._selectedDocs.clear()}>
                <div className="schema-table">
                    <div className="schema-header-row">
                        {this.columnKeys.map((key, index) => (
                            <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} />
                        ))}
                    </div>
                    <div className="schema-table-content">
                        {this.childDocs.map((doc: Doc, index: number) => (
                            <SchemaRowBox
                                {...this.props}
                                Document={doc}
                                ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                ContainingCollectionView={this.props.CollectionView}
                                rowIndex={index}
                                columnKeys={this.columnKeys}
                                columnWidths={this.columnWidths}
                                rowMenuWidth={this._rowMenuWidth}
                                selectedRows={this._selectedDocs}
                                selectRow={this.selectRow}
                                startDrag={this.startDrag}
                                dragging={this._isDragging}
                                dropIndex={this.setDropIndex}
                            />
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}