import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, observable, runInAction } from "mobx";
import React from "react";
import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils";
import { emptyFunction } from "../../../../../../Utils";
import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
import { DefaultStyleProvider } from "../../../../StyleProvider";
import { DocumentView, DocumentViewInternal } from "../../../DocumentView";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { TemplateSidescrollView } from "./TemplatesSidescrollDisplay";
import { observer } from "mobx-react";
import { Transform } from "../../../../../util/Transform";
import { Template } from "../Template";
import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";

interface TemplateEditingWindowProps {
    menu: DocCreatorMenu;
    template: Template;
    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
}

@observer
export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {

    private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
    private previewWindow: HTMLDivElement | null = null;

    @observable _variationsTabOpen: boolean = false;
    @observable _variations: Doc[] = [];

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

    @action setVariationTab = (open: boolean) => {
        this._variationsTabOpen = open;
        if (this.previewWindow && open) {
            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6);
        } else if (this.previewWindow && !open) {
            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
        }
    }

    get fireflyVariationsTab() {

        return (
            <>
                <TemplateSidescrollView
                    menu={this._props.menu}
                    title={'Generate Variations'}
                    templates={[]}
                    setupButtonClick={this._props.setupButtonClick}
                />
                <div className="docCreatorMenu-section">
                    <div className="docCreatorMenu-variation-prompt-input">
                        <textarea
                            className="docCreatorMenu-variation-prompt-input-textbox"
                            onChange={e => this.fireflyPrompt = e.target.value}
                            defaultValue={''}
                            placeholder={'Enter a custom prompt here (optional)'}
                        />
                        <button className="docCreatorMenu-menu-button" 
                            onPointerDown={e => this._props.setupButtonClick(e, async () => {
                                this._variations = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
                            })
                        }>
                            <FontAwesomeIcon icon="arrows-rotate" />
                        </button>
                    </div>
                </div>
            </>
        )
    }
   
    get renderedDocPreview(){
        const doc: Doc = this._props.template.getRenderedDoc() as unknown as Doc;

        return (
            <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}>
                <DocumentView
                    Document={doc}
                    isContentActive={emptyFunction}
                    addDocument={returnFalse}
                    moveDocument={returnFalse}
                    removeDocument={returnFalse}
                    PanelWidth={() => this.previewWindow?.clientWidth ?? 1000 - 10}
                    PanelHeight={() => this.previewWindow?.clientHeight ?? 1000 - 60}
                    ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
                    renderDepth={5}
                    whenChildContentsActiveChanged={emptyFunction}
                    focus={emptyFunction}
                    styleProvider={DefaultStyleProvider}
                    addDocTab={DocumentViewInternal.addDocTabFunc}
                    pinToPres={() => undefined}
                    childFilters={returnEmptyFilter}
                    childFiltersByRanges={returnEmptyFilter}
                    searchFilterDocs={returnEmptyDoclist}
                    fitContentsToBox={returnFalse}
                    fitWidth={returnFalse}
                />
            </div>
        )
    }

    render() {
        return (
            <div className="docCreatorMenu-expanded-template-preview">
                <div className="top-panel" />
                {this.renderedDocPreview}
                {this.fireflyVariationsTab}
                <div className="right-buttons-panel">
                    <button
                        className="docCreatorMenu-menu-button section-reveal-options top-right"
                        onPointerDown={e =>
                            this._props.setupButtonClick(e, () => {
                                if (this._props.template === this._props.menu._selectedTemplate) {
                                    this._props.menu.updateRenderedPreviewCollection(this._props.template);
                                }
                                this._props.menu.setExpandedView(undefined);
                            })
                        }>
                        <FontAwesomeIcon icon="minimize" />
                    </button>
                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => {
                            this.setVariationTab(!this._variationsTabOpen);
                         })}>
                         <FontAwesomeIcon icon="lightbulb" />
                    </button>
                </div>
            </div>
        );
    }
}