import React = require("react");
import { action, computed } from "mobx";
import { observer } from "mobx-react";
import "react-table/react-table.css";
import { Doc } from "../../../new_fields/Doc";
import { ComputedField, ScriptField } from "../../../new_fields/ScriptField";
import { NumCast, StrCast } from "../../../new_fields/Types";
import { emptyFunction, returnEmptyString, returnOne } from "../../../Utils";
import { DragManager } from "../../util/DragManager";
import { Transform } from "../../util/Transform";
import { undoBatch } from "../../util/UndoManager";
import '../DocumentDecorations.scss';
import { DocumentView } from "../nodes/DocumentView";
import "./ContentFittingDocumentView.scss";
import { CollectionView } from "../collections/CollectionView";
import { TraceMobx } from "../../../new_fields/util";

interface ContentFittingDocumentViewProps {
    Document?: Doc;
    DataDocument?: Doc;
    LibraryPath: Doc[];
    childDocs?: Doc[];
    renderDepth: number;
    fitToBox?: boolean;
    PanelWidth: () => number;
    PanelHeight: () => number;
    focus?: (doc: Doc) => void;
    CollectionView?: CollectionView;
    CollectionDoc?: Doc;
    onClick?: ScriptField;
    getTransform: () => Transform;
    addDocument?: (document: Doc) => boolean;
    moveDocument?: (document: Doc, target: Doc | undefined, addDoc: ((doc: Doc) => boolean)) => boolean;
    removeDocument?: (document: Doc) => boolean;
    active: (outsideReaction: boolean) => boolean;
    whenActiveChanged: (isActive: boolean) => void;
    addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => boolean;
    pinToPres: (document: Doc) => void;
    dontRegisterView?: boolean;
}

@observer
export class ContentFittingDocumentView extends React.Component<ContentFittingDocumentViewProps>{
    public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
    private get layoutDoc() { return this.props.Document && Doc.Layout(this.props.Document); }
    private get nativeWidth() { return NumCast(this.layoutDoc?._nativeWidth, this.props.PanelWidth()); }
    private get nativeHeight() { return NumCast(this.layoutDoc?._nativeHeight, this.props.PanelHeight()); }
    private contentScaling = () => {
        const wscale = this.props.PanelWidth() / (this.nativeWidth || this.props.PanelWidth() || 1);
        if (wscale * this.nativeHeight > this.props.PanelHeight()) {
            return (this.props.PanelHeight() / (this.nativeHeight || this.props.PanelHeight() || 1)) || 1;
        }
        return wscale || 1;
    }

    @undoBatch
    @action
    drop = (e: Event, de: DragManager.DropEvent) => {
        const docDragData = de.complete.docDragData;
        if (docDragData) {
            this.props.childDocs && this.props.childDocs.map(otherdoc => {
                const target = Doc.GetProto(otherdoc);
                target.layout = ComputedField.MakeFunction("this.image_data[0]");
                target.layout_custom = Doc.MakeDelegate(docDragData.draggedDocuments[0]);
            });
            e.stopPropagation();
        }
        return true;
    }
    private PanelWidth = () => this.nativeWidth && (!this.props.Document || !this.props.Document._fitWidth) ? this.nativeWidth * this.contentScaling() : this.props.PanelWidth();
    private PanelHeight = () => this.nativeHeight && (!this.props.Document || !this.props.Document._fitWidth) ? this.nativeHeight * this.contentScaling() : this.props.PanelHeight();
    private getTransform = () => this.props.getTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling());
    private get centeringOffset() { return this.nativeWidth && (!this.props.Document || !this.props.Document._fitWidth) ? (this.props.PanelWidth() - this.nativeWidth * this.contentScaling()) / 2 : 0; }
    private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.contentScaling()) / 2 : 0; }

    @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); }

    render() {
        TraceMobx();
        return (<div className="contentFittingDocumentView" style={{
            width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
            height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight()
        }}>
            {!this.props.Document || !this.props.PanelWidth ? (null) : (
                <div className="contentFittingDocumentView-previewDoc"
                    style={{
                        transform: `translate(${this.centeringOffset}px, 0px)`,
                        borderRadius: this.borderRounding,
                        height: Math.abs(this.centeringYOffset) > 0.001 ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
                        width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth()
                    }}>
                    <DocumentView {...this.props}
                        Document={this.props.Document}
                        DataDoc={this.props.DataDocument}
                        LibraryPath={this.props.LibraryPath}
                        fitToBox={this.props.fitToBox}
                        onClick={this.props.onClick}
                        addDocument={this.props.addDocument}
                        removeDocument={this.props.removeDocument}
                        moveDocument={this.props.moveDocument}
                        whenActiveChanged={this.props.whenActiveChanged}
                        ContainingCollectionView={this.props.CollectionView}
                        ContainingCollectionDoc={this.props.CollectionDoc}
                        addDocTab={this.props.addDocTab}
                        pinToPres={this.props.pinToPres}
                        parentActive={this.props.active}
                        ScreenToLocalTransform={this.getTransform}
                        renderDepth={this.props.renderDepth}
                        ContentScaling={this.contentScaling}
                        PanelWidth={this.PanelWidth}
                        PanelHeight={this.PanelHeight}
                        focus={this.props.focus || emptyFunction}
                        backgroundColor={returnEmptyString}
                        bringToFront={emptyFunction}
                        dontRegisterView={this.props.dontRegisterView}
                        zoomToScale={emptyFunction}
                        getScale={returnOne}
                    />
                </div>)}
        </div>);
    }
}