import { Colors } from "@dash/components/src";
import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import { Template } from "../Template";
import { makeObservable, observable, reaction, runInAction } from "mobx";
import React from "react";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { DocumentView } from "../../../DocumentView";
import { emptyFunction } from "../../../../../../Utils";
import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
import { Transform } from "../../../../../util/Transform";
import { DefaultStyleProvider } from "../../../../StyleProvider";
import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
import { IDisposer } from "mobx-utils";
import { ImageField } from "../../../../../../fields/URLField";
import { ImageCast } from "../../../../../../fields/Types";
import { observer } from "mobx-react";

export interface TemplatePreviewBoxProps {
    template: Template;
    menu: DocCreatorMenu;
    leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
    rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
}

@observer
export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {

    @observable private previewWindow: HTMLDivElement | null = null;

    setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
        this.previewWindow = node;
    }

    constructor(props: TemplatePreviewBoxProps) {
        super(props);
        makeObservable(this);
    }

    get doc() {
        return this._props.template.getRenderedDoc() as Doc;
    }

    render() {
        const template = this._props.template;

        return (
            <div
                key={template.title}
                className="docCreatorMenu-preview-window"
                ref={this.setContainerRef}
                style={{
                    border: this._props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                    boxShadow: this._props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                }}
                onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))}
                >
                    { this._props.leftButtonOpts ? 
                    <button
                        className="option-button left"
                        onPointerDown={e =>
                            this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts![1](template))
                        }>
                        <FontAwesomeIcon icon={this._props.leftButtonOpts![0]} color="white" />
                    </button> : null
                    }
                    { this._props.rightButtonOpts ? 
                    <button className="option-button right" onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.rightButtonOpts![1](template))}>
                        <FontAwesomeIcon icon={this._props.rightButtonOpts![0]} color="white" />
                    </button> : null }
                    <DocumentView
                        Document={this.doc}
                        isContentActive={emptyFunction} // !!! should be return false
                        addDocument={returnFalse}
                        moveDocument={returnFalse}
                        removeDocument={returnFalse}
                        PanelWidth={() => this.previewWindow?.clientWidth ?? this._props.menu._menuDimensions.height * .3}
                        PanelHeight={() => this.previewWindow?.clientHeight ?? this._props.menu._menuDimensions.height * .3}
                        ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
                        renderDepth={1}
                        whenChildContentsActiveChanged={emptyFunction}
                        focus={emptyFunction}
                        styleProvider={DefaultStyleProvider}
                        addDocTab={this._props.menu._props.addDocTab}
                        pinToPres={() => undefined}
                        childFilters={returnEmptyFilter}
                        childFiltersByRanges={returnEmptyFilter}
                        searchFilterDocs={returnEmptyDoclist}
                        fitContentsToBox={returnFalse}
                        fitWidth={returnFalse}
                        hideDecorations={true}
                    />
            </div>
        )
    }
}