/**
 * Prompt with some text and some actions buttons.
 */
import * as React from 'react'
import {
    CvState,
    CvProps,
    CvValueAdapter,
    CvValueListener,
    ColorUtil,
    ImageUtil,
    CvImagePackageUrl
} from 'catreact'
import {
    Log, Color, SignatureCapture
} from 'catavolt-sdk'

interface PromptBundle {
    title:string,
    message:string,
    buttonTexts:string[],
    actions:(()=>void)[]
}

let EMPTY_STATE = {
    popupActive: false,
    title: "",
    message: "",
    buttonTexts: [],
    actions: []
};

/**
 * Value to be assigned when CvPromptPopup is mounted.
 */
let openPopupPromptListener:CvValueListener<PromptBundle>;

export function promptOpenUrl(url:string) {
    let cont = ()=>{ window.open(url, '_blank');};
    let cancel = ()=>{ /* do nothing */ };
    openPopupPrompt("URL", "Press continue to process this URL: " + url,
        ["Continue", "Cancel"], [cont, cancel]);
}

export function openPopupPrompt(title:string, message:string, buttonTexts:string[], actions:(()=>void)[], containerClass?:string, buttonClass?:string):void {
    if (openPopupPromptListener != null) {  // This is the mechanism that gets us inside the component's instance
        openPopupPromptListener({title:title, message: message, buttonTexts: buttonTexts, actions: actions});
    }
}

export interface CvPopupPromptState extends CvState {
    popupActive:boolean,
    title: string,
    message: string,
    buttonTexts: string[],
    actions: string[]
}

export interface CvPopupPromptProps extends CvProps {
    title?:string,
    message?:string,
    buttonTexts?:string[],
    actions?:(()=>void)[]
}

/**
 Component that overlays a signature popup.
 */
export const CvPopupPrompt = React.createClass<CvPopupPromptProps, CvPopupPromptState>({

    componentWillMount: function() {
        let promptProvider = new CvValueAdapter<PromptBundle>();
        promptProvider.subscribe(this._handleOpenPrompt);
        openPopupPromptListener = promptProvider.createValueListener();
    },

    getInitialState: function() {
        return EMPTY_STATE;
    },

    render: function () {
        return (
            <div className="modal fade cv-popup-prompt-wrapper" role="dialog" key="CvPopupPrompt"
                 ref={(d:HTMLDivElement)=>{
                    let visible:boolean = (this.state != null) && (this.state.popupActive);
                    if(visible) {
                        let m:any = $(d);
                        if(m && m.modal){ m.modal({show:true, keyboard: false, backdrop: 'static'} ) }
                    } else {
                        let m:any = $(d);
                        if(m && m.modal){ m.modal('hide') }
                    }
                }}>
                <div className={"modal-dialog cv-popup-prompt-container"} >
                    <div className="modal-content ">
                        <div className="modal-header cv-popup-prompt-header">
                            <h2>{this.state.title}</h2>
                        </div>
                        <div className="modal-body cv-popup-prompt-body" >
                            <p>{this.state.message}</p>
                        </div>
                        <div className="modal-footer cv-popup-prompt-button-container">
                            {(()=>{
                                const elems = [];
                                this.state.buttonTexts.map((text:string, index:number)=>{
                                    elems.push(<button type="button" className="btn btn-default cv-popup-prompt-button" key={index} onClick={()=>{
                                        this.state.actions[index]();
                                        this.setState(EMPTY_STATE);
                                    }}>{text}</button>);
                                });
                                return elems;
                            })()}
                        </div>
                    </div>
                </div>
            </div>
        );
    },

    _handleOpenPrompt: function(promptBundle:PromptBundle) {
        promptBundle["popupActive"] = true;
        this.setState(promptBundle);
    },


});