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 { returnEmptyDoclist } from "../../../../../../fields/Doc";
import { IDisposer } from "mobx-utils";

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

export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {

    private previewWindow: HTMLDivElement | null = null;

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

    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 }
                    <DocumentView
                        Document={this.props.template.getRenderedDoc()!} //!!! bad
                        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>
        )
    }
}