import { Colors } from "@dash/components/src";
import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
import { Template } from "../Template";
import { 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";

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

export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {

    private previewWindow: HTMLDivElement | null = null;
    // private icon: ImageField | undefined = undefined;

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

    // componentDidMount(): void {
    //     console.log('mounted')
    //     setTimeout(() => {
    //         const docView = DocumentView.getDocumentView(this.doc);
    //         if (docView) {
    //             console.log('docview found')
    //             docView.ComponentView?.updateIcon?.();
    //             setTimeout(() => {
    //                 console.log('componentview found: ', docView.ComponentView)
    //                 this.icon = ImageCast(docView.Document.icon);
    //                 console.log('icon is:', this.icon, ' from: ', docView.Document.icon);
    //                 this.forceUpdate();
    //             }, 5000);
    //         }
    //     }, 1000);
    // }

    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, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = 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 }
                    {/* { this.icon ? 
                        <img className="docCreatorMenu-preview-image" src={this.icon.url.href.replace('.png', '_o.png')} /> */}
                    <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>
        )
    }
}