import { Colors } from "@dash/components/src";
import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
import { Template } from "../Template";
import { runInAction } from "mobx";
import React from "react";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { IconProp } from "@fortawesome/fontawesome-svg-core";

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> {

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

        return (
            <div
                key={template.title}
                className="docCreatorMenu-preview-window"
                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(() => 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.props.menu.docPreview(template.getRenderedDoc())}
            </div>
        )
    }
}