import { makeObservable, runInAction } from "mobx";
import React from "react";
import ReactLoading from "react-loading";
import { Doc } from "../../../../../../fields/Doc";
import { StrCast } from "../../../../../../fields/Types";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import { Template } from "../Template";
import { observer } from "mobx-react";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { TemplatePreviewBox } from "./TemplatePreviewBox";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { DocCreatorMenuButton } from "./DocCreatorMenuButton";

export interface SuggestedTemplatesProps {
    menu: DocCreatorMenu;
    loading?: boolean;
    templates: Template[];
    title: string;
    styles?: string; // eslint-disable-next-line
    optionsButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
    previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
    previewBoxRightButtonOpts?: [IconProp, (...args: any) => any]; 
}

@observer
export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {

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

    render() {
        return (
            <div className="docCreatorMenu-section">
                <div className="docCreatorMenu-section-topbar">
                    <div className="docCreatorMenu-section-title">{this.props.title}</div>
                    {this._props.optionsButtonOpts ? 
                        <DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/> 
                        : null}
                </div>
                <div className={"docCreatorMenu-templates-preview-window " + this._props.styles}>
                    {this._props.loading ? 
                    (<div className="loading-spinner">
                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                    </div>)
                    : this.props.templates.map((template, i) => (
                        <TemplatePreviewBox 
                        key={i}
                        template={template} 
                        menu={this.props.menu} 
                        leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
                        rightButtonOpts={this._props.previewBoxRightButtonOpts}
                        />
                    ))}
                </div>
            </div>
        );
    }
}