import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, ObservableMap, untracked } from 'mobx';
import { observer } from 'mobx-react';
import { computedFn } from 'mobx-utils';
import { Doc, Field, StrListCast } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
import { listSpec } from '../../../../fields/Schema';
import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
import { emptyFunction, returnDefault, returnEmptyDoclist, returnEmptyString, returnFalse, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils';
import { Docs, DocUtils } from '../../../documents/Documents';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
import { SelectionManager } from '../../../util/SelectionManager';
import { undoBatch } from '../../../util/UndoManager';
import { ContextMenu } from '../../ContextMenu';
import { EditableView } from '../../EditableView';
import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView';
import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
import { KeyValueBox } from '../../nodes/KeyValueBox';
import { DefaultStyleProvider } from '../../StyleProvider';
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', 'creationDate', 'text'];

@observer
export class CollectionSchemaView extends CollectionSubView() {
    private _closestDropIndex: number = 0;
    private _previewRef: HTMLDivElement | null = null;
    private _makeNewColumn: boolean = false;

    public static _rowHeight: number = 40;
    public static _minColWidth: number = 25;
    public static _rowMenuWidth: number = 60;
    public static _previewDividerWidth: number = 4;

    @computed get _selectedDocs() {
        return SelectionManager.Docs().filter(doc => Doc.AreProtosEqual(DocCast(doc.context), this.props.Document));
    }
    @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
    @observable _colEles: HTMLDivElement[] = [];
    @observable _displayColumnWidths: number[] | undefined;
    @observable _columnMenuIndex: number | undefined;
    @observable _menuOptions: string[] = [];
    @observable _newFieldWarning: string = '';
    @observable _makeNewField: boolean = false;
    @observable _newFieldDefault: any = 0;
    @observable _newFieldType: ColumnType = ColumnType.Number;
    @observable _menuValue: string = '';
    @observable _filterColumnIndex: number | undefined;
    @observable _filterValue: string = '';

    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.layoutDoc.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);
    }

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

    rowIndex(doc: Doc) {
        return this.childDocs.indexOf(doc);
    }

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

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

    @action
    onKeyDown = (e: KeyboardEvent) => {
        if (this._selectedDocs.length > 0) {
            switch (e.key) {
                case 'ArrowDown':
                    {
                        const lastDoc = this._selectedDocs.lastElement();
                        const lastIndex = this.rowIndex(lastDoc);
                        const curDoc = this.childDocs[lastIndex];
                        if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
                            !e.shiftKey && this.clearSelection();
                            const newDoc = this.childDocs[lastIndex + 1];
                            if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
                            else this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1);
                        }
                        e.stopPropagation();
                    }
                    break;
                case 'ArrowUp':
                    {
                        const firstDoc = this._selectedDocs.lastElement();
                        const firstIndex = this.rowIndex(firstDoc);
                        const curDoc = this.childDocs[firstIndex];
                        if (firstIndex > 0 && firstIndex < this.childDocs.length) {
                            !e.shiftKey && this.clearSelection();
                            const newDoc = this.childDocs[firstIndex - 1];
                            if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
                            else this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1);
                        }
                        e.stopPropagation();
                    }
                    break;
            }
        }
    };

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

    addRow = (doc: Doc | Doc[]) => {
        const result: boolean = this.addDocument(doc);
        this.setSort(this.sortField, this.sortDesc);
        return result;
    };

    @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 = (key: string, defaultVal?: any) => {
        if (!this.documentKeys.includes(key)) {
            this.addNewKey(key, defaultVal);
        }

        const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
        const currWidths = this.storedColumnWidths.slice();
        currWidths.splice(0, 0, newColWidth);
        const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
        this.layoutDoc.columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));

        let currKeys = this.columnKeys.slice();
        currKeys.splice(0, 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;
        const currWidths = this.storedColumnWidths.slice();
        currWidths.splice(index, 1);
        const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
        this.layoutDoc.columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));

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

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

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

            let change = e.movementX;

            if (index !== 0) {
                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 < CollectionSchemaView._minColWidth) {
                change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth;
            }

            this._displayColumnWidths[shrinking] -= change * this.props.ScreenToLocalTransform().Scale;
            this._displayColumnWidths[growing] += change * this.props.ScreenToLocalTransform().Scale;

            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: PointerEvent, index: number) => {
        const dragData = new DragManager.ColumnDragData(index);
        const dragEles = [this._colEles[index]];
        this.childDocs.forEach(doc => {
            dragEles.push(this._rowEles.get(doc).children[1].children[index]);
        });
        DragManager.StartColumnDrag(dragEles, dragData, e.x, e.y);

        return true;
    };

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

    @action
    setColRef = (index: number, ref: HTMLDivElement) => {
        if (this._colEles.length <= index) {
            this._colEles.push(ref);
        } else {
            this._colEles[index] = ref;
        }
    };

    @action
    addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => {
        const rowDocView = DocumentManager.Instance.getDocumentView(doc);
        if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection);
    };

    @action
    clearSelection = () => SelectionManager.DeselectAll();

    selectRows = (rootDoc: Doc, lastSelected: Doc) => {
        const index = this.childDocs.indexOf(rootDoc);
        const lastSelectedRow = this.childDocs.indexOf(lastSelected);
        const startRow = Math.min(lastSelectedRow, index);
        const endRow = Math.max(lastSelectedRow, index);
        for (let i = startRow; i <= endRow; i++) {
            const currDoc = this.childDocs[i];
            if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i);
        }
    };

    sortedSelectedDocs = () => this.childDocs.filter(doc => this._selectedDocs.includes(doc));

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

    @action
    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
        if (de.complete.columnDragData) {
            e.stopPropagation();
            const mouseX = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0];
            let i = de.complete.columnDragData.colIndex;
            this.displayColumnWidths.reduce((total, curr, index) => {
                if (total <= mouseX && total + curr >= mouseX) {
                    i = index;
                }
                return total + curr;
            }, CollectionSchemaView._rowMenuWidth);
            this.swapColumns(de.complete.columnDragData.colIndex, i);
            e.stopPropagation();
            return true;
        }
        const draggedDocs = de.complete.docDragData?.draggedDocuments;
        if (draggedDocs && super.onInternalDrop(e, de)) {
            const pushedDocs = this.childDocs.filter((doc, index) => index >= this._closestDropIndex && !draggedDocs.includes(doc));
            const pushedAndDraggedDocs = [...pushedDocs, ...draggedDocs];
            const removed = this.childDocs.slice().filter(doc => !pushedAndDraggedDocs.includes(doc));
            this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...removed, ...draggedDocs, ...pushedDocs]);
            this.setSort(undefined);
            SelectionManager.DeselectAll();
            draggedDocs.forEach(doc => {
                const draggedView = DocumentManager.Instance.getFirstDocumentView(doc);
                if (draggedView) DocumentManager.Instance.RemoveView(draggedView);
                DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true));
            });
            e.stopPropagation();
            return true;
        }
        return false;
    };

    @action
    onExternalDrop = async (e: React.DragEvent): Promise<void> => {
        super.onExternalDrop(e, {}, undoBatch(action(docus => docus.map((doc: Doc) => this.addDocument(doc)))));
        this.setSort(undefined);
    };

    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.layoutDoc.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, _autoHeight: true });
        FormattedTextBox.SelectOnLoad = newDoc[Id];
        FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' ';
        return this.addRow(newDoc) || false;
    };

    menuCallback = (x: number, y: number) => {
        ContextMenu.Instance.clearItems();

        DocUtils.addDocumentCreatorMenuItems(doc => this.addRow(doc), this.addRow, x, y, true);

        ContextMenu.Instance.setDefaultItem('::', (name: string): void => {
            Doc.GetProto(this.props.Document)[name] = '';
            this.addRow(Docs.Create.TextDocument('', { title: name, _autoHeight: true }));
        });
        ContextMenu.Instance.displayMenu(x, y, undefined, true);
    };

    focusDocument = (doc: Doc, options: DocFocusOptions) => {
        Doc.BrushDoc(doc);

        const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]);
        if (found) {
            const top = found.getBoundingClientRect().top;
            const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
            if (Math.floor(localTop[1]) !== 0) {
                let focusSpeed = options.zoomTime ?? 500;
                smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc);
                return focusSpeed;
            }
        }
        return undefined;
    };

    @computed get fieldDefaultInput() {
        switch (this._newFieldType) {
            case ColumnType.Number:
                return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
            case ColumnType.Boolean:
                return (
                    <>
                        <input type="checkbox" name="" id="" value={this._newFieldDefault} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} />
                        {this._newFieldDefault ? 'true' : 'false'}
                    </>
                );
            case ColumnType.String:
                return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
        }
    }

    onSearchKeyDown = (e: React.KeyboardEvent) => {
        switch (e.key) {
            case 'Enter':
                this._menuOptions.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuOptions[0]) : action(() => (this._makeNewField = true))();
                break;
            case 'Escape':
                this.closeColumnMenu();
                break;
        }
    };

    @action
    setKey = (key: string, defaultVal?: any) => {
        if (this._makeNewColumn) {
            this.addColumn(key, defaultVal);
        } else {
            this.changeColumnKey(this._columnMenuIndex!, key, defaultVal);
        }
        this.closeColumnMenu();
    };

    setColumnValues = (key: string, value: string) => {
        let success: boolean = true;
        this.childDocs.forEach(doc => success && KeyValueBox.SetField(doc, key, value));
        return success;
    };

    @action
    openColumnMenu = (index: number, newCol: boolean) => {
        this._makeNewColumn = false;
        this._columnMenuIndex = index;
        this._menuValue = '';
        this._menuOptions = this.documentKeys;
        this._makeNewField = false;
        this._newFieldWarning = '';
        this._makeNewField = false;
        this._makeNewColumn = newCol;
    };

    @action
    closeColumnMenu = () => (this._columnMenuIndex = undefined);

    @action
    openFilterMenu = (index: number) => {
        this._filterColumnIndex = index;
        this._filterValue = this.getFieldFilters(this.columnKeys[this._filterColumnIndex!]).map(filter => filter.split(':')[1])[0];
    };

    @action
    closeFilterMenu = (setValue: boolean) => {
        if (setValue) {
            if (this._filterValue !== '') {
                Doc.setDocFilter(this.Document, this.columnKeys[this._filterColumnIndex!], this._filterValue, 'check', false, undefined, false);
            } else {
                this.removeFieldFilters(this.columnKeys[this._filterColumnIndex!]);
            }
        }
        this._filterColumnIndex = undefined;
    };

    openContextMenu = (x: number, y: number, index: number) => {
        this.closeColumnMenu();
        this.closeFilterMenu(false);
        ContextMenu.Instance.clearItems();
        ContextMenu.Instance.addItem({
            description: 'Change field',
            event: () => this.openColumnMenu(index, false),
            icon: 'pencil-alt',
        });
        ContextMenu.Instance.addItem({
            description: 'Filter field',
            event: () => this.openFilterMenu(index),
            icon: 'filter',
        });
        ContextMenu.Instance.addItem({
            description: 'Delete column',
            event: () => this.removeColumn(index),
            icon: 'trash',
        });
        ContextMenu.Instance.displayMenu(x, y, undefined, false);
    };

    @action
    updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        this._menuValue = e.target.value;
        this._menuOptions = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
    };

    getFieldFilters = (field: string) => StrListCast(this.Document._docFilters).filter(filter => filter.split(':')[0] == field);

    removeFieldFilters = (field: string) => {
        this.getFieldFilters(field).forEach(filter => Doc.setDocFilter(this.Document, field, filter.split(':')[1], 'remove'));
    };

    onFilterKeyDown = (e: React.KeyboardEvent) => {
        //prettier-ignore
        switch (e.key) {
            case 'Enter' : this.closeFilterMenu(true); break;
            case 'Escape': this.closeFilterMenu(false);break;
        }
    };

    @action
    updateFilterSearch = (e: React.ChangeEvent<HTMLInputElement>) => (this._filterValue = e.target.value);

    @computed get newFieldMenu() {
        return (
            <div className="schema-new-key-options">
                <div className="schema-key-type-option">
                    <input
                        type="radio"
                        name="newFieldType"
                        checked={this._newFieldType == ColumnType.Number}
                        onChange={action(() => {
                            this._newFieldType = ColumnType.Number;
                            this._newFieldDefault = 0;
                        })}
                    />
                    number
                </div>
                <div className="schema-key-type-option">
                    <input
                        type="radio"
                        name="newFieldType"
                        checked={this._newFieldType == ColumnType.Boolean}
                        onChange={action(() => {
                            this._newFieldType = ColumnType.Boolean;
                            this._newFieldDefault = false;
                        })}
                    />
                    boolean
                </div>
                <div className="schema-key-type-option">
                    <input
                        type="radio"
                        name="newFieldType"
                        checked={this._newFieldType == ColumnType.String}
                        onChange={action(() => {
                            this._newFieldType = ColumnType.String;
                            this._newFieldDefault = '';
                        })}
                    />
                    string
                </div>
                <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
                <div className="schema-key-warning">{this._newFieldWarning}</div>
                <div
                    className="schema-column-menu-button"
                    onPointerDown={action(e => {
                        if (this.documentKeys.includes(this._menuValue)) {
                            this._newFieldWarning = 'Field already exists';
                        } else if (this._menuValue.length === 0) {
                            this._newFieldWarning = 'Field cannot be an empty string';
                        } else {
                            this.setKey(this._menuValue, this._newFieldDefault);
                        }
                    })}>
                    done
                </div>
            </div>
        );
    }

    @computed get keysDropdown() {
        return (
            <div className="schema-key-search">
                <div
                    className="schema-column-menu-button"
                    onPointerDown={action(e => {
                        e.stopPropagation();
                        this._makeNewField = true;
                    })}>
                    + new field
                </div>
                <div
                    className="schema-key-list"
                    ref={r =>
                        r?.addEventListener(
                            'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
                            (e: WheelEvent) => {
                                if (!r.scrollTop && e.deltaY <= 0) e.preventDefault();
                                e.stopPropagation();
                            },
                            { passive: false }
                        )
                    }>
                    {this._menuOptions.map(key => (
                        <div
                            className="schema-key-search-result"
                            onPointerDown={e => {
                                e.stopPropagation();
                                this.setKey(key);
                            }}>
                            {key}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    @computed get renderColumnMenu() {
        const x = this._columnMenuIndex! == -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
        return (
            <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
                <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
                {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
                <div
                    className="schema-column-menu-button"
                    onPointerDown={action(e => {
                        e.stopPropagation();
                        this.closeColumnMenu();
                    })}>
                    cancel
                </div>
            </div>
        );
    }

    @computed get renderFilterOptions() {
        const keyOptions: string[] = [];
        const columnKey = this.columnKeys[this._filterColumnIndex!];
        this.childDocs.forEach(doc => {
            const key = StrCast(doc[columnKey]);
            if (keyOptions.includes(key) === false && (key.includes(this._filterValue) || !this._filterValue) && key !== '') {
                keyOptions.push(key);
            }
        });

        const filters = StrListCast(this.Document._docFilters);
        for (let i = 0; i < (filters?.length ?? 0) - 1; i++) {
            if (filters[i] === columnKey && keyOptions.includes(filters[i].split(':')[1]) === false) {
                keyOptions.push(filters[i + 1]);
            }
        }

        const options = keyOptions.map(key => {
            let bool = false;
            if (filters !== undefined) {
                const ind = filters.findIndex(filter => filter.split(':')[1] === key);
                const fields = ind === -1 ? undefined : filters[ind].split(':');
                bool = fields ? fields[2] === 'check' : false;
            }
            return (
                <div key={key} className="schema-filter-option">
                    <input
                        type="checkbox"
                        onPointerDown={e => e.stopPropagation()}
                        onClick={e => e.stopPropagation()}
                        onChange={action(e => {
                            if (e.target.checked) {
                                Doc.setDocFilter(this.props.Document, columnKey, key, 'check');
                            } else {
                                Doc.setDocFilter(this.props.Document, columnKey, key, 'remove');
                            }
                        })}
                        checked={bool}
                    />
                    <span style={{ paddingLeft: 4 }}>{key}</span>
                </div>
            );
        });

        return options;
    }

    @computed get renderFilterMenu() {
        const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
        return (
            <div className="schema-filter-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
                <input className="schema-filter-input" type="text" value={this._filterValue} onKeyDown={this.onFilterKeyDown} onChange={this.updateFilterSearch} onPointerDown={e => e.stopPropagation()} />
                {this.renderFilterOptions}
                <div
                    className="schema-column-menu-button"
                    onPointerDown={action(e => {
                        e.stopPropagation();
                        this.closeFilterMenu(true);
                    })}>
                    done
                </div>
            </div>
        );
    }

    @computed get sortedDocs() {
        const field = StrCast(this.layoutDoc.sortField);
        const desc = BoolCast(this.layoutDoc.sortDesc);
        const docs = !field
            ? this.childDocs
            : 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;
              });
        return { docs };
    }
    sortedDocsFunc = () => this.sortedDocs;
    isContentActive = () => this.props.isSelected() || this.props.isContentActive();
    screenToLocal = () => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0);
    previewWidthFunc = () => this.previewWidth;
    render() {
        return (
            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)}>
                <div
                    className="schema-table"
                    onWheel={e => this.props.isContentActive() && e.stopPropagation()}
                    ref={r => {
                        // prevent wheel events from passively propagating up through containers
                        r?.addEventListener('wheel', (e: WheelEvent) => {}, { passive: false });
                    }}>
                    <div className="schema-header-row" style={{ height: CollectionSchemaView._rowHeight }}>
                        <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}>
                            <div className="schema-header-button" onPointerDown={e => (this._columnMenuIndex === -1 ? this.closeColumnMenu() : this.openColumnMenu(-1, true))}>
                                <FontAwesomeIcon icon="plus" />
                            </div>
                        </div>
                        {this.columnKeys.map((key, index) => (
                            <SchemaColumnHeader
                                key={index}
                                columnIndex={index}
                                columnKeys={this.columnKeys}
                                columnWidths={this.displayColumnWidths}
                                sortField={this.sortField}
                                sortDesc={this.sortDesc}
                                setSort={this.setSort}
                                removeColumn={this.removeColumn}
                                resizeColumn={this.startResize}
                                openContextMenu={this.openContextMenu}
                                dragColumn={this.dragColumn}
                                setColRef={this.setColRef}
                            />
                        ))}
                    </div>
                    {this._columnMenuIndex !== undefined && this.renderColumnMenu}
                    {this._filterColumnIndex !== undefined && this.renderFilterMenu}
                    <CollectionSchemaViewDocs schema={this} childDocs={this.sortedDocsFunc} />

                    <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)}>
                        {Array.from(this._selectedDocs).lastElement() && (
                            <DocumentView
                                Document={Array.from(this._selectedDocs).lastElement()}
                                DataDoc={undefined}
                                fitContentsToBox={returnTrue}
                                dontCenter={'y'}
                                onClickScriptDisable="always"
                                focus={DocUtils.DefaultFocus}
                                renderDepth={this.props.renderDepth + 1}
                                rootSelected={this.rootSelected}
                                PanelWidth={this.previewWidthFunc}
                                PanelHeight={this.props.PanelHeight}
                                isContentActive={returnTrue}
                                isDocumentActive={returnFalse}
                                ScreenToLocalTransform={this.screenToLocal}
                                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.addRow}
                                removeDocument={this.props.removeDocument}
                                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
                                addDocTab={this.props.addDocTab}
                                pinToPres={this.props.pinToPres}
                                bringToFront={returnFalse}
                            />
                        )}
                    </div>
                )}
            </div>
        );
    }
}

interface CollectionSchemaViewDocsProps {
    schema: CollectionSchemaView;
    childDocs: () => { docs: Doc[] };
}

@observer
class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
    tableWidthFunc = () => this.props.schema.tableWidth;
    rowHeightFunc = () => CollectionSchemaView._rowHeight;
    childScreenToLocal = computedFn((index: number) => () => this.props.schema.props.ScreenToLocalTransform().translate(0, -CollectionSchemaView._rowHeight - index * this.rowHeightFunc()));
    render() {
        return (
            <div className="schema-table-content">
                {this.props.childDocs().docs.map((doc: Doc, index: number) => {
                    const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc;
                    return (
                        <div className="schema-row-wrapper" style={{ maxHeight: CollectionSchemaView._rowHeight }}>
                            <DocumentView
                                key={doc[Id]}
                                {...this.props.schema.props}
                                LayoutTemplate={this.props.schema.props.childLayoutTemplate}
                                LayoutTemplateString={SchemaRowBox.LayoutString(this.props.schema.props.fieldKey)}
                                Document={doc}
                                DataDoc={dataDoc}
                                renderDepth={this.props.schema.props.renderDepth + 1}
                                ContainingCollectionView={this.props.schema.props.CollectionView}
                                ContainingCollectionDoc={this.props.schema.Document}
                                PanelWidth={this.tableWidthFunc}
                                PanelHeight={this.rowHeightFunc}
                                styleProvider={DefaultStyleProvider}
                                waitForDoubleClickToClick={returnNever}
                                defaultDoubleClick={returnDefault}
                                enableDragWhenActive={true}
                                onClickScriptDisable="always"
                                focus={this.props.schema.focusDocument}
                                docFilters={this.props.schema.childDocFilters}
                                docRangeFilters={this.props.schema.childDocRangeFilters}
                                searchFilterDocs={this.props.schema.searchFilterDocs}
                                rootSelected={this.props.schema.rootSelected}
                                ScreenToLocalTransform={this.childScreenToLocal(index)}
                                bringToFront={emptyFunction}
                                isDocumentActive={this.props.schema.props.childDocumentsActive?.() ? this.props.schema.props.isDocumentActive : this.props.schema.isContentActive}
                                isContentActive={emptyFunction}
                                whenChildContentsActiveChanged={active => this.props.schema.props.whenChildContentsActiveChanged(active)}
                                hideDecorations={true}
                                hideTitle={true}
                                hideDocumentButtonBar={true}
                                hideLinkAnchors={true}
                                fitWidth={returnTrue}
                                scriptContext={this}
                            />
                        </div>
                    );
                })}
            </div>
        );
    }
}