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

export interface SuggestedTemplatesProps {
    menu: DocCreatorMenu;
    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
}

@observer
export class SuggestedTemplatesWindow extends ObservableReactComponent<SuggestedTemplatesProps> {

    @observable _GPTLoading: boolean = false;

    @observable _suggestedTemplates: Template[] = [];
    @observable _userTemplates: Template[] = [];

    @action addUserTemplate = (template: Template) => { this._userTemplates.push(template) };
    @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1) };

    render() {
        return (
            <div className='docCreatorMenu-templates-view'>
                <div className="docCreatorMenu-templates-displays">
                    <div className="docCreatorMenu-section">
                        <div className="docCreatorMenu-section-topbar">
                            <div className="docCreatorMenu-section-title">Suggested Templates</div>
                            <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(() => (this.props.menu._menuContent = 'dashboard')))}>
                                <FontAwesomeIcon icon="gear" />
                            </button>
                        </div>
                        <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
                            {this._suggestedTemplates.map(template => (
                                <TemplatePreviewBox 
                                template={template} 
                                menu={this.props.menu} 
                                leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
                                rightButtonOpts={["plus", (template: Template) => this.addUserTemplate(template)]}
                                />
                            ))}
                        </div>
                        <div className="docCreatorMenu-GPT-options">
                            <div className="docCreatorMenu-GPT-options-container">
                                <button className="docCreatorMenu-menu-button" onPointerDown={e => this.props.setupButtonClick(e, () => this.props.menu.generatePresetTemplates())}>
                                    <FontAwesomeIcon icon="arrows-rotate" />
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr className="docCreatorMenu-option-divider full no-margin" />
                    <div className="docCreatorMenu-section">
                        <div className="docCreatorMenu-section-topbar">
                            <div className="docCreatorMenu-section-title">Your Templates</div>
                            <button className="docCreatorMenu-menu-button section-reveal-options">
                                <FontAwesomeIcon icon="gear" />
                            </button>
                        </div>
                        <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
                            {this._userTemplates.map(template => (
                                <TemplatePreviewBox 
                                template={template} 
                                menu={this.props.menu} 
                                
                                />
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}