import React = require("react");
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, untracked } from "mobx";
import { observer } from "mobx-react";
import Measure from "react-measure";
import { Resize } from "react-table";
import "react-table/react-table.css";
import { Doc, Opt } from "../../../fields/Doc";
import { List } from "../../../fields/List";
import { listSpec } from "../../../fields/Schema";
import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
import { Cast, NumCast } from "../../../fields/Types";
import { TraceMobx } from "../../../fields/util";
import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils";
import { SelectionManager } from "../../util/SelectionManager";
import { SnappingManager } from "../../util/SnappingManager";
import { Transform } from "../../util/Transform";
import { undoBatch } from "../../util/UndoManager";
import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss';
import { ContextMenu } from "../ContextMenu";
import { ContextMenuProps } from "../ContextMenuItem";
import '../DocumentDecorations.scss';
import { DocumentView } from "../nodes/DocumentView";
import { DefaultStyleProvider } from "../StyleProvider";
import "./CollectionSchemaView.scss";
import { CollectionSubView } from "./CollectionSubView";
import { SchemaTable } from "./SchemaTable";
// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657

export enum ColumnType {
    Any,
    Number,
    String,
    Boolean,
    Doc,
    Image,
    List,
    Date
}
// this map should be used for keys that should have a const type of value
const columnTypes: Map<string, ColumnType> = new Map([
    ["title", ColumnType.String],
    ["x", ColumnType.Number], ["y", ColumnType.Number], ["_width", ColumnType.Number], ["_height", ColumnType.Number],
    ["_nativeWidth", ColumnType.Number], ["_nativeHeight", ColumnType.Number], ["isPrototype", ColumnType.Boolean],
    ["_curPage", ColumnType.Number], ["_currentTimecode", ColumnType.Number], ["zIndex", ColumnType.Number]
]);

@observer
export class CollectionSchemaView extends CollectionSubView(doc => doc) {
    private _previewCont?: HTMLDivElement;

    @observable _previewDoc: Doc | undefined = undefined;
    @observable _focusedTable: Doc = this.props.Document;
    @observable _col: any = "";
    @observable _menuWidth = 0;
    @observable _headerOpen = false;
    @observable _headerIsEditing = false;
    @observable _menuHeight = 0;
    @observable _pointerX = 0;
    @observable _pointerY = 0;
    @observable _openTypes: boolean = false;

    @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
    @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
    @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); }
    @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
    @computed get scale() { return this.props.ScreenToLocalTransform().Scale; }
    @computed get columns() { return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); }
    set columns(columns: SchemaHeaderField[]) { this.props.Document._schemaHeaders = new List<SchemaHeaderField>(columns); }

    @computed get menuCoordinates() {
        let searchx = 0;
        let searchy = 0;
        if (this.props.Document._searchDoc) {
            const el = document.getElementsByClassName("collectionSchemaView-searchContainer")[0];
            if (el !== undefined) {
                const rect = el.getBoundingClientRect();
                searchx = rect.x;
                searchy = rect.y;
            }
        }
        const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx;
        const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)) - searchy;
        return this.props.ScreenToLocalTransform().transformPoint(x, y);
    }

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

    @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing;

    @undoBatch
    setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => {
        this._openTypes = false;
        if (columnTypes.get(columnField.heading)) return;

        const columns = this.columns;
        const index = columns.indexOf(columnField);
        if (index > -1) {
            columnField.setType(NumCast(type));
            columns[index] = columnField;
            this.columns = columns;
        }
    }

    @undoBatch
    setColumnColor = (columnField: SchemaHeaderField, color: string): void => {
        const columns = this.columns;
        const index = columns.indexOf(columnField);
        if (index > -1) {
            columnField.setColor(color);
            columns[index] = columnField;
            this.columns = columns; // need to set the columns to trigger rerender
        }
    }

    @undoBatch
    @action
    setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
        const columns = this.columns;
        columns.forEach(col => col.setDesc(undefined));

        const index = columns.findIndex(c => c.heading === columnField.heading);
        const column = columns[index];
        column.setDesc(descending);
        columns[index] = column;
        this.columns = columns;
    }

    renderTypes = (col: any) => {
        if (columnTypes.get(col.heading)) return (null);

        const type = col.type;

        const anyType = <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Any)}>
            <FontAwesomeIcon icon={"align-justify"} size="sm" />
                Any
            </div>;

        const numType = <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Number)}>
            <FontAwesomeIcon icon={"hashtag"} size="sm" />
                Number
            </div>;

        const textType = <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.String)}>
            <FontAwesomeIcon icon={"font"} size="sm" />
            Text
            </div>;

        const boolType = <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Boolean)}>
            <FontAwesomeIcon icon={"check-square"} size="sm" />
            Checkbox
            </div>;

        const listType = <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.List)}>
            <FontAwesomeIcon icon={"list-ul"} size="sm" />
            List
            </div>;

        const docType = <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Doc)}>
            <FontAwesomeIcon icon={"file"} size="sm" />
            Document
            </div>;

        const imageType = <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Image)}>
            <FontAwesomeIcon icon={"image"} size="sm" />
            Image
            </div>;

        const dateType = <div className={"columnMenu-option" + (type === ColumnType.Date ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Date)}>
            <FontAwesomeIcon icon={"calendar"} size="sm" />
                Date
                </div>;


        const allColumnTypes = <div className="columnMenu-types">
            {anyType}
            {numType}
            {textType}
            {boolType}
            {listType}
            {docType}
            {imageType}
            {dateType}
        </div>;

        const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType :
            type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType :
                type === ColumnType.List ? listType : type === ColumnType.Doc ? docType :
                    type === ColumnType.Date ? dateType : imageType;

        return (
            <div className="collectionSchema-headerMenu-group" onClick={action(() => this._openTypes = !this._openTypes)}>
                <div>
                    <label style={{ cursor: "pointer" }}>Column type:</label>
                    <FontAwesomeIcon icon={"caret-down"} size="lg" style={{ float: "right", transform: `rotate(${this._openTypes ? "180deg" : 0})`, transition: "0.2s all ease" }} />
                </div>
                {this._openTypes ? allColumnTypes : justColType}
            </div >
        );
    }

    renderSorting = (col: any) => {
        const sort = col.desc;
        return (
            <div className="collectionSchema-headerMenu-group">
                <label>Sort by:</label>
                <div className="columnMenu-sort">
                    <div className={"columnMenu-option" + (sort === true ? " active" : "")} onClick={() => this.setColumnSort(col, true)}>
                        <FontAwesomeIcon icon="sort-amount-down" size="sm" />
                        Sort descending
                    </div>
                    <div className={"columnMenu-option" + (sort === false ? " active" : "")} onClick={() => this.setColumnSort(col, false)}>
                        <FontAwesomeIcon icon="sort-amount-up" size="sm" />
                        Sort ascending
                    </div>
                    <div className="columnMenu-option" onClick={() => this.setColumnSort(col, undefined)}>
                        <FontAwesomeIcon icon="times" size="sm" />
                        Clear sorting
                    </div>
                </div>
            </div>
        );
    }

    renderColors = (col: any) => {
        const selected = col.color;

        const pink = PastelSchemaPalette.get("pink2");
        const purple = PastelSchemaPalette.get("purple2");
        const blue = PastelSchemaPalette.get("bluegreen1");
        const yellow = PastelSchemaPalette.get("yellow4");
        const red = PastelSchemaPalette.get("red2");
        const gray = "#f1efeb";

        return (
            <div className="collectionSchema-headerMenu-group">
                <label>Color:</label>
                <div className="columnMenu-colors">
                    <div className={"columnMenu-colorPicker" + (selected === pink ? " active" : "")} style={{ backgroundColor: pink }} onClick={() => this.setColumnColor(col, pink!)}></div>
                    <div className={"columnMenu-colorPicker" + (selected === purple ? " active" : "")} style={{ backgroundColor: purple }} onClick={() => this.setColumnColor(col, purple!)}></div>
                    <div className={"columnMenu-colorPicker" + (selected === blue ? " active" : "")} style={{ backgroundColor: blue }} onClick={() => this.setColumnColor(col, blue!)}></div>
                    <div className={"columnMenu-colorPicker" + (selected === yellow ? " active" : "")} style={{ backgroundColor: yellow }} onClick={() => this.setColumnColor(col, yellow!)}></div>
                    <div className={"columnMenu-colorPicker" + (selected === red ? " active" : "")} style={{ backgroundColor: red }} onClick={() => this.setColumnColor(col, red!)}></div>
                    <div className={"columnMenu-colorPicker" + (selected === gray ? " active" : "")} style={{ backgroundColor: gray }} onClick={() => this.setColumnColor(col, gray)}></div>
                </div>
            </div>
        );
    }

    @undoBatch
    @action
    changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => {
        const columns = this.columns;
        if (columns === undefined) {
            this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
        } else {
            if (addNew) {
                columns.push(new SchemaHeaderField(newKey, "f1efeb"));
                this.columns = columns;
            } else {
                const index = columns.map(c => c.heading).indexOf(oldKey);
                if (index > -1) {
                    const column = columns[index];
                    column.setHeading(newKey);
                    columns[index] = column;
                    this.columns = columns;
                    if (filter) {
                        Doc.setDocFilter(this.props.Document, newKey, filter, "match");
                    }
                    else {
                        this.props.Document._docFilters = undefined;
                    }
                }
            }
        }
    }

    @action
    openHeader = (col: any, screenx: number, screeny: number) => {
        this._col = col;
        this._headerOpen = true;
        this._pointerX = screenx;
        this._pointerY = screeny;
    }

    @action
    closeHeader = () => { this._headerOpen = false; }

    @undoBatch
    @action
    deleteColumn = (key: string) => {
        const columns = this.columns;
        if (columns === undefined) {
            this.columns = new List<SchemaHeaderField>([]);
        } else {
            const index = columns.map(c => c.heading).indexOf(key);
            if (index > -1) {
                columns.splice(index, 1);
                this.columns = columns;
            }
        }
        this.closeHeader();
    }

    getPreviewTransform = (): Transform => {
        return this.props.ScreenToLocalTransform().translate(- this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, - this.borderWidth);
    }

    @action
    onHeaderClick = (e: React.PointerEvent) => {
        e.stopPropagation();
    }

    @action
    onWheel(e: React.WheelEvent) {
        const scale = this.props.ScreenToLocalTransform().Scale;
        this.props.active(true) && e.stopPropagation();
    }

    @computed get renderMenuContent() {
        TraceMobx();
        return <div className="collectionSchema-header-menuOptions">
            {this.renderTypes(this._col)}
            {this.renderColors(this._col)}
            <div className="collectionSchema-headerMenu-group">
                <button onClick={() => { this.deleteColumn(this._col.heading); }}
                >Delete Column</button>
            </div>
        </div>;
    }

    private createTarget = (ele: HTMLDivElement) => {
        this._previewCont = ele;
        super.CreateDropTarget(ele);
    }

    isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable;

    @action setFocused = (doc: Doc) => this._focusedTable = doc;

    @action setPreviewDoc = (doc: Opt<Doc>) => {
        SelectionManager.SelectSchemaView(this, doc);
        this._previewDoc = doc;
    }

    //toggles preview side-panel of schema
    @action
    toggleExpander = () => {
        this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0;
    }

    onDividerDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, this.toggleExpander);
    }
    @action
    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
        const nativeWidth = this._previewCont!.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;
    }

    onPointerDown = (e: React.PointerEvent): void => {
        if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) {
            if (this.props.isSelected(true)) e.stopPropagation();
            else this.props.select(false);
        }
    }

    @computed
    get previewDocument(): Doc | undefined { return this._previewDoc; }

    @computed
    get dividerDragger() {
        return this.previewWidth() === 0 ? (null) :
            <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} >
                <div className="collectionSchemaView-dividerDragger" />
            </div>;
    }

    @computed
    get previewPanel() {
        return <div ref={this.createTarget} style={{ width: `${this.previewWidth()}px` }}>
            {!this.previewDocument ? (null) :
                <DocumentView
                    Document={this.previewDocument}
                    DataDoc={undefined}
                    fitContentsToDoc={true}
                    freezeDimensions={true}
                    dontCenter={"y"}
                    focus={emptyFunction}
                    renderDepth={this.props.renderDepth}
                    rootSelected={this.rootSelected}
                    PanelWidth={this.previewWidth}
                    PanelHeight={this.previewHeight}
                    ScreenToLocalTransform={this.getPreviewTransform}
                    docFilters={this.docFilters}
                    docRangeFilters={this.docRangeFilters}
                    searchFilterDocs={this.searchFilterDocs}
                    styleProvider={DefaultStyleProvider}
                    ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                    ContainingCollectionView={this.props.CollectionView}
                    moveDocument={this.props.moveDocument}
                    addDocument={this.props.addDocument}
                    removeDocument={this.props.removeDocument}
                    parentActive={this.props.active}
                    whenActiveChanged={this.props.whenActiveChanged}
                    addDocTab={this.props.addDocTab}
                    pinToPres={this.props.pinToPres}
                    bringToFront={returnFalse}
                />}
        </div>;
    }

    @computed
    get schemaTable() {
        return <SchemaTable
            Document={this.props.Document}
            PanelHeight={this.props.PanelHeight}
            PanelWidth={this.props.PanelWidth}
            childDocs={this.childDocs}
            CollectionView={this.props.CollectionView}
            ContainingCollectionView={this.props.ContainingCollectionView}
            ContainingCollectionDoc={this.props.ContainingCollectionDoc}
            fieldKey={this.props.fieldKey}
            renderDepth={this.props.renderDepth}
            moveDocument={this.props.moveDocument}
            ScreenToLocalTransform={this.props.ScreenToLocalTransform}
            active={this.props.active}
            onDrop={this.onExternalDrop}
            addDocTab={this.props.addDocTab}
            pinToPres={this.props.pinToPres}
            isSelected={this.props.isSelected}
            isFocused={this.isFocused}
            setFocused={this.setFocused}
            setPreviewDoc={this.setPreviewDoc}
            deleteDocument={this.props.removeDocument}
            addDocument={this.props.addDocument}
            dataDoc={this.props.DataDoc}
            columns={this.columns}
            documentKeys={this.documentKeys}
            headerIsEditing={this._headerIsEditing}
            openHeader={this.openHeader}
            onClick={this.onTableClick}
            onPointerDown={emptyFunction}
            onResizedChange={this.onResizedChange}
            setColumns={this.setColumns}
            reorderColumns={this.reorderColumns}
            changeColumns={this.changeColumns}
            setHeaderIsEditing={this.setHeaderIsEditing}
            changeColumnSort={this.setColumnSort}
        />;
    }

    @computed
    public get schemaToolbar() {
        return <div className="collectionSchemaView-toolbar">
            <div className="collectionSchemaView-toolbar-item">
                <div id="preview-schema-checkbox-div">
                    <input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />
                    Show Preview
                </div>
            </div>
        </div>;
    }

    onSpecificMenu = (e: React.MouseEvent) => {
        if ((e.target as any)?.className?.includes?.("collectionSchemaView-cell") || (e.target instanceof HTMLSpanElement)) {
            const cm = ContextMenu.Instance;
            const options = cm.findByDescription("Options...");
            const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
            optionItems.push({ description: "remove", event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: "trash" });
            !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
            cm.displayMenu(e.clientX, e.clientY);
            (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this.
            e.stopPropagation();
        }
    }

    @action
    onTableClick = (e: React.MouseEvent): void => {
        if (!(e.target as any)?.className?.includes?.("collectionSchemaView-cell") && !(e.target instanceof HTMLSpanElement)) {
            this.setPreviewDoc(undefined);
        } else {
            e.stopPropagation();
        }
        this.setFocused(this.props.Document);
        this.closeHeader();
    }

    onResizedChange = (newResized: Resize[], event: any) => {
        const columns = this.columns;
        newResized.forEach(resized => {
            const index = columns.findIndex(c => c.heading === resized.id);
            const column = columns[index];
            column.setWidth(resized.value);
            columns[index] = column;
        });
        this.columns = columns;
    }

    @action
    setColumns = (columns: SchemaHeaderField[]) => this.columns = columns

    @undoBatch
    reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => {
        const columns = [...columnsValues];
        const oldIndex = columns.indexOf(toMove);
        const relIndex = columns.indexOf(relativeTo);
        const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex;

        if (oldIndex === newIndex) return;

        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
        this.columns = columns;
    }

    onZoomMenu = (e: React.WheelEvent) => this.props.active(true) && e.stopPropagation();

    render() {
        TraceMobx();
        if (!this.props.active()) setTimeout(() => this.closeHeader(), 0);
        const menuContent = this.renderMenuContent;
        const menu = <div className="collectionSchema-header-menu"
            onWheel={e => this.onZoomMenu(e)}
            onPointerDown={e => this.onHeaderClick(e)}
            style={{ transform: `translate(${(this.menuCoordinates[0])}px, ${(this.menuCoordinates[1])}px)` }}>
            <Measure offset onResize={action((r: any) => {
                const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
                this._menuWidth = dim[0]; this._menuHeight = dim[1];
            })}>
                {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>}
            </Measure>
        </div>;
        return <div className={"collectionSchemaView" + (this.props.Document._searchDoc ? "-searchContainer" : "-container")}
            style={{
                overflow: this.props.overflow === true ? "scroll" : undefined, backgroundColor: "white",
                pointerEvents: this.props.Document._searchDoc !== undefined && !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
                width: name === "collectionSchemaView-searchContainer" ? "auto" : this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative",
            }}  >
            <div className="collectionSchemaView-tableContainer"
                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
                onContextMenu={this.onSpecificMenu}
                onPointerDown={this.onPointerDown}
                onWheel={e => this.props.active(true) && e.stopPropagation()}
                onDrop={e => this.onExternalDrop(e, {})}
                ref={this.createTarget}>
                {this.schemaTable}
            </div>
            {this.dividerDragger}
            {!this.previewWidth() ? (null) : this.previewPanel}
            {this._headerOpen && this.props.active() ? menu : null}
        </div>;
    }
}