CampaignForms = function( options ) {
    this.rootElement = null;

    this.campaignEditor = {
        changes : new DevExpress.data.ArrayStore( { data : [] } )
    }


    if( options.campaignEditor ) {
        this.campaignEditor = options.campaignEditor;
    }
    this.campaign = $.extend( true, {}, options.campaign );

}

CampaignForms.prototype.constructor = CampaignForms;

CampaignForms.prototype.element = function() {

    if( this.rootELement ) return this.rootElement;

    this.rootElement = $("<div>").addClass( "CampaignForms" );

    this.createUI();

    return this.rootElement;
}

CampaignForms.prototype.getData = function() {

    let ds = this.campaignFormsGrid.getDataSource();
    if( ds ) {
        ds.load();
        return ds.items();
    } else {
        return [];
    }
}

CampaignForms.prototype.setData = function( data ) {

    let dataSource = new DevExpress.data.DataSource( {
        store : { type : "array", data : data, key : "formId" }
    })

    this.campaignFormsGrid.option( "dataSource", dataSource );
}

CampaignForms.prototype.newWorkflowForm = function() {

    let instance = this;

    let workflowFormData = { formId : 0 };
    if( instance.campaign.campaignType == "EMAIL" ) {
        workflowFormData.isEmailCampaignApplicable = true;
    }
    if( instance.campaign.campaignType == "WEBSITE" ) {
        workflowFormData.isWebsiteApplicable = true;
    }

    instance.editWorkflowForm(  workflowFormData )

    console.log( "CAMPAIGN", instance.campaign );
}

CampaignForms.prototype.editWorkflowForm = function( workflowFormData ) {

    let instance = this;

    let popup = null;

    let workflowFormEditor = new WorkflowFormEditor( workflowFormData, {
        workflowFormManager : {
            onWorkflowFormUpdated : function( workflowFormEditData ){

                console.log( "onWorkflowFormUpdated", workflowFormEditData );

                popup.option( "title", workflowFormEditData.formName );

                // run through this list and add if we don't aready (new form)
                let addIt = true;
                let newData = [];
                instance.getData().forEach( function( wfi ) {
                    newData.push( wfi );
                    if( wfi.formId === workflowFormEditData.formId ) {
                        addIt = false;
                    }
                })

                if( addIt ) {
                    newData.push( workflowFormEditData );
                    instance.setData( newData );
                    instance.campaignEditor.changes.insert( "forms" ); 

                }

            }
        }
    })

    popup = $("<div>").dxPopup( {

        title : workflowFormData.formName ? workflowFormData.formName : "New Form",
        hideOnOutsideClick : true,
        height : 660,
        contentTemplate : function() {
            return workflowFormEditor.element();
        },
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $("body") ).dxPopup("instance");

    popup.show();

}


CampaignForms.prototype.createUI = function() {

    let instance = this;

    //let data = this.data;

    instance.rootElement.empty();

    let campaignFormAddButton = null;

    let availableFormsDataSource = Fse.Data.newDataSource( { object : "WRK.forms", keyField : "formId" } );
    availableFormsDataSource.filter( [ "ready", "=", "Y" ] );

    let workflowFormSelectBox = $("<div>").dxSelectBox( {
        placeholder : "Select a form and click Add",
        width : 300,
        dataSource : availableFormsDataSource,
        displayExpr : "formName",
        valueExpr : "formId",
        searchEnabled : true,
        searchExpr : "formName",
        onValueChanged : function( e ) {
            if( e.value ) {
                campaignFormAddButton.option( "disabled", false )
            } else {
                campaignFormAddButton.option( "disabled", true )
            }
        }
    }).dxSelectBox( "instance" );

    campaignFormAddButton = $("<div>").dxButton( {
        text : "Add",
        onClick : function( e ) {


            let workflowFormToAdd = workflowFormSelectBox.option( "selectedItem" );
            if( workflowFormToAdd ) {

                let addIt = true;
                let newData = [];
                instance.getData().forEach( function( wfi ) {
                    newData.push( wfi );
                    if( wfi.formId === workflowFormToAdd.formId ) {
                        addIt = false;
                    }
                })

                if( addIt ) {
                    newData.push( workflowFormToAdd );
                    instance.setData( newData );
                    instance.campaignEditor.changes.insert( "forms" ); 

                }

            }

            workflowFormSelectBox.option( "value", null );
        },
        disabled : true,
    }).dxButton( "instance" );


    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" ); 

    createSubmissionLink = function( rowData ) {
        let submissionLink = null;
        if( rowData.token && rowData.parseEntity ) {
            submissionLink = Fse.Util.updateURL2( `${portalDocRootURL}/public/form.cfm`, { formId : rowData.formId, linkId : rowData.linkId, linkType : rowData.linkType, token : rowData.token } );
        }
        return submissionLink
    }

    instance.campaignFormsGrid = $("<div>").dxDataGrid( {

        dataSource : [], 
        rowAlternationEnabled : true,
        columns : [
            { dataField : "formName", caption : "Form", width : 300 },
            { 
                name : "formWarnings",
                caption : "Form Warnings",
                calculateCellValue : function( rowData ) {
                    let formWarnings = [];
                    if( ! rowData.parseEntity ){
                        formWarnings.push( "No CRM field mappings! To use this form within emails or generate a submission link, please edit this form and use the CRM Field Mappings tab to implement the appropriate mappings." );
                    }
                    return formWarnings;
                },
                cellTemplate : function( container, options ) {

                    if( ! options.value || options.value.length == 0 ) return;

                    container.css( { "color" : "#f53611", "overflow" : "auto" } );
                    container.text( options.value[0] );
                    return;
                }
            },
            { name : "submissionLink",
                width : 130,
                 caption : "Submission Link", 
                placeholder : "na for newly added forms", 
                calculateCellValue : function( rowData ) {
                    return createSubmissionLink( rowData );
                }, 
                cellTemplate : function( container, options) {
                    if( options.rowType === "data" && options.value ) {
                        container.append( $("<a>").attr( { "href" : options.value, "target" : "_blank", "rel" : "noopener noreferrer" } ).append( "link" ) );
                    }
                } 
            },
            {   type : "buttons",
                alignment : "right",
                width : 95,
                buttons : [ 
                    {
                        icon : "copy",
                        hint : "Copy submission link to Clipboard",
                        visible : function( options ) {
                            return createSubmissionLink( options.row.data ) ? true : false;
                        },
                        onClick : function( e ) {
                            let submissionLink = createSubmissionLink( e.row.data );
                            if( submissionLink ) {
                                navigator.clipboard.writeText( submissionLink ).then( function() {
                                    DevExpress.ui.notify("Submission link copied to Clipboard.");
                                })
                            }
                        }
                    },

                    { icon : "edit",
                      hint : "Edit Form",
                      visible : true,
                      onClick : function( e ) {
                        instance.editWorkflowForm( e.row.data );
                      }
                    },
                    
                    {
                    icon : "trash",
                    visible : true,
                    hint : "Remove this form from the Campaign",
                    onClick : function( e ) {
                        e.component.deleteRow( e.row.rowIndex );
                    }
                } ],
            }
        ],
        showBorders : true,
        editing : {
            xallowDeleting : true,
            useIcons : true,
            confirmDelete : false
        },
        onRowRemoved : function( e ) {
            instance.campaignEditor.changes.insert( "forms" ); 
        },
        onCellDblClick : function( e ) {
            if( e.rowType != "data" ) return;

            if( e.column.dataField == "formName" && e.row.data.formId ) {
                instance.editWorkflowForm( e.row.data );
            }
        },
        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) {
                e.toolbarOptions.items = [];
            }

            e.toolbarOptions.items.push(
                { location : "after",
                  template : function() {
                    return workflowFormSelectBox.element();
                  }
                },{
                    location : "after",
                    template : function() {
                        return campaignFormAddButton.element();
                    }
                },
                {
                    location : "after",
                    widget : "dxButton",
                    options : {
                        text : "New",
                        hint : "Create a new form from scratch",
                        onClick : function( e ) {
                            instance.newWorkflowForm();
                        }
                    }
                },
            )
        }

    }).dxDataGrid( "instance" );

    instance.rootElement.append( instance.campaignFormsGrid.element() );
}