import React = require('react');
import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
import { RichTextField } from '../../../../fields/RichTextField';
import { listSpec } from '../../../../fields/Schema';
import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
import { ImageField } from '../../../../fields/URLField';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
import { Docs, DocUtils } from '../../../documents/Documents';
import { DragManager } from '../../../util/DragManager';
import { SelectionManager } from '../../../util/SelectionManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
import { ContextMenu } from '../../ContextMenu';
import { ContextMenuProps } from '../../ContextMenuItem';
import { EditableView } from '../../EditableView';
import { DocumentView } from '../../nodes/DocumentView';
import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionSchemaView.scss';
import { SchemaColumnHeader } from './SchemaColumnHeader';
import { SchemaRowBox } from './SchemaRowBox';
import { DefaultStyleProvider } from '../../StyleProvider';

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

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

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

    public static _rowMenuWidth: number = 100;
    public static _previewDividerWidth: number = 4;
    @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
    @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
    @observable _isDragging: boolean = false;
    @observable _displayColumnWidths: number[] | undefined;
    @observable _previewDoc: Doc | undefined;

    get documentKeys() {
        const docs = this.childDocs;
        const keys: { [key: string]: boolean } = {};
        // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
        //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
        //  invalidated and re-rendered.   This workaround will inquire all of the document fields before the options button is clicked.
        //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
        //  is displayed (unlikely) it won't show up until something else changes.
        //TODO Types
        untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false)))));

        // this.columns.forEach(key => (keys[key.heading] = true));
        return Array.from(Object.keys(keys));
    }

    @computed get previewWidth() {
        return NumCast(this.props.Document.schemaPreviewWidth);
    }

    @computed get tableWidth() {
        return this.props.PanelWidth() - this.previewWidth - (this.previewWidth === 0 ? 0 : CollectionSchemaView._previewDividerWidth);
    }

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

    @computed get storedColumnWidths() {
        let widths = Cast(
            this.layoutDoc.columnWidths,
            listSpec('number'),
            this.columnKeys.map(() => (this.tableWidth - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length)
        );

        const totalWidth = widths.reduce((sum, width) => sum + width, 0);
        if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
            widths = widths.map(w => {
                const proportion = w / totalWidth;
                return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
            });
        }

        return widths;
    }

    @computed get displayColumnWidths() {
        return this._displayColumnWidths ?? this.storedColumnWidths;
    }

    @computed get sortField() {
        return StrCast(this.layoutDoc.sortField, 'creationDate');
    }

    @computed get sortDesc() {
        return BoolCast(this.layoutDoc.sortDesc);
    }

    componentDidMount() {
        document.addEventListener('keydown', this.onKeyDown);
    }

    componentWillUnmount() {
        document.removeEventListener('keydown', this.onKeyDown);
    }

    @action
    onKeyDown = (e: KeyboardEvent) => {
        if (this._selectedDocs.size > 0) {
            if (e.key == 'ArrowDown') {
                const lastDoc = Array.from(this._selectedDocs.values()).lastElement();
                const lastIndex = this.childDocs.indexOf(lastDoc);
                if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
                    this._selectedDocs.clear();
                    const newDoc = this.childDocs[lastIndex + 1];
                    this._selectedDocs.add(newDoc);
                    SelectionManager.SelectSchemaViewDoc(newDoc);
                    this._previewDoc = newDoc;
                }
            }
            if (e.key == 'ArrowUp') {
                const firstDoc = Array.from(this._selectedDocs.values())[0];
                const firstIndex = this.childDocs.indexOf(firstDoc);
                if (firstIndex > 0) {
                    this._selectedDocs.clear();
                    const newDoc = this.childDocs[firstIndex - 1];
                    this._selectedDocs.add(newDoc);
                    SelectionManager.SelectSchemaViewDoc(newDoc);
                    this._previewDoc = newDoc;
                }
            }
        }
    };

    @undoBatch
    @action
    setSort = (field: string, desc: boolean) => {
        this.layoutDoc.sortField = field;
        this.layoutDoc.sortDesc = desc;

        this.childDocs.sort((docA, docB) => {
            const aStr = Field.toString(docA[field] as Field);
            const bStr = Field.toString(docB[field] as Field);
            var out = 0;
            if (aStr < bStr) out = -1;
            if (aStr > bStr) out = 1;
            if (desc) out *= -1;
            return out;
        });
    };

    @undoBatch
    @action
    changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
        if (!this.documentKeys.includes(newKey)) {
            this.addNewKey(newKey, defaultVal);
        }

        let currKeys = [...this.columnKeys];
        currKeys[index] = newKey;
        this.layoutDoc.columnKeys = new List<string>(currKeys);
    };

    @undoBatch
    @action
    addColumn = (index: number, key: string, defaultVal?: any) => {
        if (!this.documentKeys.includes(key)) {
            this.addNewKey(key, defaultVal);
        }

        let currWidths = [...this.storedColumnWidths];
        const newColWidth = this.tableWidth / (currWidths.length + 1);
        currWidths = currWidths.map(w => {
            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth);
            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth);
        });
        currWidths.splice(index + 1, 0, newColWidth);
        this.layoutDoc.columnWidths = new List<number>(currWidths);

        let currKeys = [...this.columnKeys];
        currKeys.splice(index + 1, 0, key);
        this.layoutDoc.columnKeys = new List<string>(currKeys);
    };

    @action
    addNewKey = (key: string, defaultVal: any) => {
        this.childDocs.forEach(doc => (doc[key] = defaultVal));
    };

    @undoBatch
    @action
    removeColumn = (index: number) => {
        if (this.columnKeys.length === 1) return;
        let currWidths = [...this.storedColumnWidths];
        const removedColWidth = currWidths[index];
        currWidths = currWidths.map(w => {
            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth);
            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
        });
        currWidths.splice(index, 1);
        this.layoutDoc.columnWidths = new List<number>(currWidths);

        let currKeys = [...this.columnKeys];
        currKeys.splice(index, 1);
        this.layoutDoc.columnKeys = new List<string>(currKeys);
    };

    @action
    startResize = (e: any, index: number, left: boolean) => {
        this._displayColumnWidths = this.storedColumnWidths;
        setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index, left), this.finishResize, emptyFunction);
    };

    @action
    resizeColumn = (e: PointerEvent, index: number, left: boolean) => {
        if (this._displayColumnWidths) {
            let shrinking;
            let growing;

            let change = e.movementX;

            if (left && index !== 0) {
                growing = change < 0 ? index : index - 1;
                shrinking = change < 0 ? index - 1 : index;
            } else if (!left && index !== this.columnKeys.length - 1) {
                growing = change > 0 ? index : index + 1;
                shrinking = change > 0 ? index + 1 : index;
            }

            if (shrinking === undefined || growing === undefined) return true;

            change = Math.abs(change);
            if (this._displayColumnWidths[shrinking] - change < this._minColWidth) {
                change = this._displayColumnWidths[shrinking] - this._minColWidth;
            }

            this._displayColumnWidths[shrinking] -= change;
            this._displayColumnWidths[growing] += change;

            return false;
        }
        return true;
    };

    @action
    finishResize = () => {
        this.layoutDoc.columnWidths = new List<number>(this._displayColumnWidths);
        this._displayColumnWidths = undefined;
    };

    @undoBatch
    @action
    swapColumns = (index1: number, index2: number) => {
        const tempKey = this.columnKeys[index1];
        const tempWidth = this.storedColumnWidths[index1];

        let currKeys = this.columnKeys;
        currKeys[index1] = currKeys[index2];
        currKeys[index2] = tempKey;
        this.layoutDoc.columnKeys = new List<string>(currKeys);

        let currWidths = this.storedColumnWidths;
        currWidths[index1] = currWidths[index2];
        currWidths[index2] = tempWidth;
        this.layoutDoc.columnWidths = new List<number>(currWidths);
    };

    // @action
    // dragColumn = (e: any, index: number) => {
    //     e.stopPropagation();
    //     e.preventDefault();
    //     const rect = e.target.getBoundingClientRect();
    //     if (e.clientX < rect.x) {
    //         if (index < 1) return true;
    //         this.swapColumns(index - 1, index);
    //         return true;
    //     }
    //     if (e.clientX > rect.x + rect.width) {
    //         if (index === this.columnKeys.length) return true;
    //         this.swapColumns(index, index + 1);
    //         return true;
    //     }
    //     return false;
    // };

    @action
    addRowRef = (doc: Doc, ref: HTMLDivElement) => {
        this._rowEles.set(doc, ref);
    };

    @action
    selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, 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;
        }

        if (this._lastSelectedRow && this._selectedDocs.size > 0) {
            SelectionManager.SelectSchemaViewDoc(this.childDocs[this._lastSelectedRow]);
        } else {
            SelectionManager.SelectSchemaViewDoc(undefined);
        }

        if (this._selectedDocs.size == 1) {
            this._previewDoc = Array.from(this._selectedDocs)[0];
        } else {
            this._previewDoc = undefined;
        }
    };

    @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
    onExternalDrop = async (e: React.DragEvent): Promise<void> => {
        super.onExternalDrop(
            e,
            {},
            undoBatch(
                action(docus => {
                    this._isDragging = false;
                    docus.map((doc: Doc) => this.addDocument(doc));
                })
            )
        );
    };

    @action
    startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
        if (!this._selectedDocs.has(doc)) {
            this._selectedDocs.clear();
            this._selectedDocs.add(doc);
            this._lastSelectedRow = index;
            SelectionManager.SelectSchemaViewDoc(doc);
        }
        this._isDragging = true;
        this._selectedDocSortedArray = this.sortedSelectedDocs();
        const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move');
        dragData.moveDocument = this.props.moveDocument;
        const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()).map((doc: Doc) => this._rowEles.get(doc));

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

    onDividerDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
    };

    @action
    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
        const nativeWidth = this._previewRef!.getBoundingClientRect();
        const minWidth = 40;
        const maxWidth = 1000;
        const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
        const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
        this.props.Document.schemaPreviewWidth = width;
        return false;
    };

    @action
    addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
        if (!value && !forceEmptyNote) return false;
        const newDoc = Docs.Create.TextDocument(value, { title: value });
        FormattedTextBox.SelectOnLoad = newDoc[Id];
        FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' ';
        return this.props.addDocument?.(newDoc) || false;
    };

    menuCallback = (x: number, y: number) => {
        ContextMenu.Instance.clearItems();
        const layoutItems: ContextMenuProps[] = [];
        const docItems: ContextMenuProps[] = [];
        const dataDoc = this.props.DataDoc || this.props.Document;

        DocUtils.addDocumentCreatorMenuItems(
            doc => {
                FormattedTextBox.SelectOnLoad = StrCast(doc[Id]);
                return this.addDocument(doc);
            },
            this.addDocument,
            x,
            y,
            true
        );

        Array.from(Object.keys(Doc.GetProto(dataDoc)))
            .filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof dataDoc[fieldKey] === 'string')
            .map(fieldKey =>
                docItems.push({
                    description: ':' + fieldKey,
                    event: () => {
                        const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document));
                        if (created) {
                            if (this.props.Document.isTemplateDoc) {
                                Doc.MakeMetadataFieldTemplate(created, this.props.Document);
                            }
                            return this.props.addDocument?.(created);
                        }
                    },
                    icon: 'compress-arrows-alt',
                })
            );
        Array.from(Object.keys(Doc.GetProto(dataDoc)))
            .filter(fieldKey => DocListCast(dataDoc[fieldKey]).length)
            .map(fieldKey =>
                docItems.push({
                    description: ':' + fieldKey,
                    event: () => {
                        const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey });
                        if (created) {
                            const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document;
                            if (container.isTemplateDoc) {
                                Doc.MakeMetadataFieldTemplate(created, container);
                                return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created);
                            }
                            return this.props.addDocument?.(created) || false;
                        }
                    },
                    icon: 'compress-arrows-alt',
                })
            );
        !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' });
        !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' });
        ContextMenu.Instance.setDefaultItem('::', (name: string): void => {
            Doc.GetProto(this.props.Document)[name] = '';
            const created = Docs.Create.TextDocument('', { title: name, _width: 250, _autoHeight: true });
            if (created) {
                if (this.props.Document.isTemplateDoc) {
                    Doc.MakeMetadataFieldTemplate(created, this.props.Document);
                }
                this.props.addDocument?.(created);
            }
        });
        ContextMenu.Instance.displayMenu(x, y, undefined, true);
    };

    isChildContentActive = () =>
        this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined;

    getDocTransform(doc: Doc, dref?: DocumentView) {
        const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
        // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
        return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
    }

    render() {
        return (
            <div
                className="collectionSchemaView"
                ref={(ele: HTMLDivElement | null) => {
                    this._ref = ele;
                    this.createDashEventsTarget(ele);
                }}
                onDrop={this.onExternalDrop.bind(this)}>
                <div
                    className="schema-table"
                    onPointerDown={action(() => {
                        this._selectedDocs.clear();
                        SelectionManager.SelectSchemaViewDoc(undefined);
                        this._previewDoc = undefined;
                    })}>
                    <div className="schema-header-row">
                        <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div>
                        {this.columnKeys.map((key, index) => {
                            return (
                                <SchemaColumnHeader
                                    key={index}
                                    columnIndex={index}
                                    columnKeys={this.columnKeys}
                                    columnWidths={this.displayColumnWidths}
                                    possibleKeys={this.documentKeys}
                                    sortField={this.sortField}
                                    sortDesc={this.sortDesc}
                                    setSort={this.setSort}
                                    changeColumnKey={this.changeColumnKey}
                                    addColumn={this.addColumn}
                                    removeColumn={this.removeColumn}
                                    resizeColumn={this.startResize}
                                    // dragColumn={this.dragColumn}
                                />
                            );
                        })}
                    </div>
                    <div className="schema-table-content" onPointerDown={e => e.stopPropagation()}>
                        {this.childDocs.map((doc: Doc, index: number) => {
                            const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc;
                            let dref: Opt<DocumentView>;

                            return (
                                <SchemaRowBox
                                    {...this.props}
                                    key={index}
                                    Document={doc}
                                    ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                    ContainingCollectionView={this.props.CollectionView}
                                    rowIndex={index}
                                    columnKeys={this.columnKeys}
                                    columnWidths={this.displayColumnWidths}
                                    rowMenuWidth={CollectionSchemaView._rowMenuWidth}
                                    selectedDocs={this._selectedDocs}
                                    selectRow={this.selectRow}
                                    startDrag={this.startDrag}
                                    dragging={this._isDragging}
                                    dropIndex={this.setDropIndex}
                                    addRowRef={this.addRowRef}
                                />
                            );
                        })}
                    </div>
                    <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                </div>
                {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>}
                {this.previewWidth > 0 && (
                    <div style={{ width: `${this.previewWidth}px` }} ref={ref => (this._previewRef = ref)}>
                        {this._previewDoc && (
                            <DocumentView
                                Document={this._previewDoc}
                                DataDoc={undefined}
                                fitContentsToBox={returnTrue}
                                dontCenter={'y'}
                                focus={DocUtils.DefaultFocus}
                                renderDepth={this.props.renderDepth}
                                rootSelected={this.rootSelected}
                                PanelWidth={() => this.previewWidth}
                                PanelHeight={this.props.PanelHeight}
                                isContentActive={returnTrue}
                                isDocumentActive={returnFalse}
                                ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0)}
                                docFilters={this.childDocFilters}
                                docRangeFilters={this.childDocRangeFilters}
                                searchFilterDocs={this.searchFilterDocs}
                                styleProvider={DefaultStyleProvider}
                                docViewPath={returnEmptyDoclist}
                                ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                ContainingCollectionView={this.props.CollectionView}
                                moveDocument={this.props.moveDocument}
                                addDocument={this.props.addDocument}
                                removeDocument={this.props.removeDocument}
                                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
                                addDocTab={this.props.addDocTab}
                                pinToPres={this.props.pinToPres}
                                bringToFront={returnFalse}
                            />
                        )}
                    </div>
                )}
            </div>
        );
    }
}