import { Colors } from '@dash/components/src';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Template } from '../Template';
import { action, makeObservable, observable } 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 { observer } from 'mobx-react';

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

@observer
export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
    @observable private previewWindow: HTMLDivElement | null = null;

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

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

    docPanelWidth = () => this.previewWindow?.clientWidth ?? this._props.menu._menuDimensions.height * 0.3;
    docPanelHeight = () => this.previewWindow?.clientHeight ?? this._props.menu._menuDimensions.height * 0.3;
    docScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);

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

        return (
            <div
                key={template.title}
                className="docCreatorMenu-preview-window"
                ref={action((node: HTMLDivElement | null) => (this.previewWindow = node))}
                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.docPanelWidth}
                    PanelHeight={this.docPanelHeight}
                    ScreenToLocalTransform={this.docScreenToLocalXf}
                    renderDepth={1}
                    whenChildContentsActiveChanged={emptyFunction}
                    focus={emptyFunction}
                    styleProvider={DefaultStyleProvider}
                    addDocTab={this._props.menu._props.addDocTab}
                    pinToPres={emptyFunction}
                    childFilters={returnEmptyFilter}
                    childFiltersByRanges={returnEmptyFilter}
                    searchFilterDocs={returnEmptyDoclist}
                    // fitContentsToBox={returnFalse}
                    // fitWidth={returnFalse}
                    hideDecorations={true}
                />
            </div>
        );
    }
}