const dialogs = require("raw-dialogs");

//***NEW Methods ****
//Creates a simple alert with message,
dialogs.alert("message"); 				//immovable alert.
dialogs.alert("message", "titlebar"); 			//alert movable.
dialogs.alert("message", "titlebar", "button-label"); //label the button.
dialogs.alert("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.alert("message", "titlebar", "button-label", callbackfunction); //label the button and call function.

//Creates prompt
dialogs.prompt("message"); 				//unmovable alert.
dialogs.prompt("message", "titlebar"); 	//alert movable.
dialogs.prompt("message", "titlebar", "button-label"); //label the button.
dialogs.prompt("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.prompt("message", "titlebar", "button-label", callbackfunction); //label the button and call function.


//To create alert set the props (JSON format) and pass it to createDialog() method
let props = {
    type: "alert",
    titlebar: "Alerting Application",
    message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
    defaultvalue: "Default Value",
    buttons: [
        {
            label: "Enter your name and click proceed",
            callbackfunction: [
                { name: "alertMessage", params: ["param1", "param2"] },
                { name: "alertMessage1" }
            ]
        }
    ]
}
dialogs.createDialog(props);

/*To create a simple Prompt set the props (JSON format) and pass it to createDialog() method
An Input will be shown to get the input*/
let props = {
    type: "prompt",
    titlebar: "Prompting Application",
    message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
    defaultvalue: "Default Value",
    buttons: [
        {
            label: "Enter your name and click proceed",
            callbackfunction: [
                { name: "alertMessage", params: ["param1", "param2"] },
                { name: "alertMessage1" }
            ]
        }
    ]
};
dialogs.createDialog(props);

/*To create an overlay set the props (JSON format) and pass it to createDialog() method
This option is to allow us to create a lot complex forms.
*/
let props = {
    type: "overlay",
    titlebar: "Overlaying Application",
    title: "Add New Client Information",
    fullscreen: false,
    help: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
    message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
    form: {
        cssclass: "form",
        controls: [
            {
                type: "label",
                caption: "Name",
                style: "color: red; font-weight: bold",
            },
            {
                type: "input",
                inputtype: "text",
                placeholder: "Placeholder that will be shown",
                cssclass: "form-controls", //CSS from Bootstrap
            },
            {
                type: "label",
                caption: "Age",
                style: "color: blue; font-weight: bold",
            },
            {
                type: "select",
                options: "< 15, 15-30, 31-45, 46-60, 61-75, > 75",
                values: "1, 2, 3,4,5,6 ",
                defaultvalue: "31-45",
                cssclass: "form-controls, chosen-select", //CSS from Bootstrap
            },
            {
                type: "label",
                caption: "Address",
                style: "color: gray; font-weight: bold",
            },
            {
                type: "textarea",
                rows: 5,
                placeholder: "Placeholder that will be shown",
                cssclass: "form-controls", //CSS from Bootstrap
            },
        ],
    },
    buttons: [
        {
            label: "Ok",
            callbackfunction: [{name: alertMessage}],
            cssclass: "btn, btn-primary", //Button CSS from Bootstrap
            focus: true,
        },
        {
            label: "Cancel",
            callbackfunction: [
                {name: alertMessage1, params: [param1, param2],
                {name: alertMessage}
            ],
            cssclass: "btn, btn-warning", //Button CSS from Bootstrap
        },
    ],
};
dialogs.createDialog(props);