PartnerPayableEditor = function( options ) {
    this.data = options;
    this.rootElement = null;
}

PartnerPayableEditor.prototype.constructor = PartnerPayableEditor;

PartnerPayableEditor.prototype.element = function() {
    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }  
}

PartnerPayableEditor.prototype.show = function() {
    let instance = this;

    instance.createPopup();
    instance.payablePopUp.show();

}

PartnerPayableEditor.prototype.savePayableForm = function( formData ) {
    let instance = this;

    const loadPanel = $( '<div>' ).dxLoadPanel({
        container: instance.payablePopUp.element(),
        visible: false,
        showIndicator: true,
        showPane: true,
        shading: true,
        hideOnOutsideClick: false,
        message: 'Saving...',
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $( 'body' ) ).dxLoadPanel('instance');

    if( formData ) {
        loadPanel.show();

        //let saveURL = Fse.Util.updateURL2( $( "link#appActionURL" ).attr( "href" ), { object : "TPM.act_savePartnerPayables" } );

        var saveURL = $("link#PortalDocRootURL").attr("href") + "/apps/TPM/index.cfm?do=savePartnerPayables";

        $.ajax({
            url: saveURL,
            method: 'POST',
            data: formData,
        }).always( function() {
            loadPanel.hide();
            instance.payablePopUp.hide();
            $( '#payableDataGrid' ).dxDataGrid('instance').refresh();
        })
    }
}

PartnerPayableEditor.prototype.createForm = function() {
    let instance = this;

    instance.payableForm = $( '<div>' ).dxForm({
        formData: this.data,
        showColonAfterLabel: true,
        validationGroup: 'savePayableForm$',
        showValidationSummary: true,
        items: [{
            itemType: 'group',
            items: [{
                    dataField: 'payerCode',
                    label: { text: 'Payer ID' },
                },{
                    dataField: 'payableTo',
                    label: { text: 'Make Checks Payable To' },
                    validationRules: [{
                        type: 'required',
                        message: 'Make Checks Payable To is required',
                    }]
                },{
                    dataField: 'address1',
                    label: { text: 'Address' },
                    validationRules: [{
                        type: 'required',
                        message: 'Address is required',
                    }]
                },{
                    dataField: 'address2',
                    label: { text: 'Address 2' },
                },{
                    itemType: 'group',
                    colCount: 3,
                    items: [{
                        dataField: 'city',
                        validationRules: [{
                            type: 'required',
                            message: 'City is required',
                        }]
                    }, {
                        dataField: 'state',
                        validationRules: [{
                            type: 'required',
                            message: 'State is required',
                        }]
                    }, {
                        dataField: 'zipcode',
                        label: { text: 'Zip Code' },
                        validationRules: [{
                            type: 'required',
                            message: 'Address is required',
                        }]
                    }],
                },{
                    dataField: 'attention',
                    label: { text: 'Attention' },
                    xvalidationRules: [{
                        type: 'required',
                        message: 'Attention is required',
                    }]
                }],
            }]
    }).dxForm( 'instance' );
}

PartnerPayableEditor.prototype.createPopup = function() {
    let instance = this;

    instance.createForm();

    let submitButton = $( '<div>' ).dxButton({
        text: 'Save Payable',
        type: 'default',
        validationGroup: 'savePayableForm$',
        onClick: function( e ) {
            var validationResponse = e.validationGroup.validate();

            if( validationResponse.isValid ) {
                let formData = instance.payableForm.option( 'formData' );
                instance.savePayableForm( formData );
            }
        },
    }).dxButton( 'instance' );

    let cancelButton = $( '<div>' ).dxButton({
        text: 'Cancel',
        type: 'normal',
        onClick: function( e ) {
            if( confirm( 'Are you sure you want to cancel?' ) ) {
                instance.payablePopUp.hide();
            }
        }
    }).dxButton( 'instance' );

    let payablePopUpToolbarItems = [{
        toolbar: 'bottom', 
        location: 'after', 
        template: function( e ) {
            return cancelButton.element();
        },
    },{ 
        toolbar: 'bottom',
        location: 'after',
        template: function( e ) {
            return submitButton.element();
        }
    }];

    instance.payablePopUp = $( '<div id="payablePopUp">' ).dxPopup({
        title: instance.payableForm.option( 'formData' ).partnerPayableId ? 'Edit Payable' : 'Add Payable',
        height: "auto", 
        width: 800,
        toolbarItems: payablePopUpToolbarItems,
        contentTemplate: function() { return instance.payableForm.element() },
    }).appendTo( 'body' ).dxPopup( 'instance' );
}