PartnerTrade = function( options ) {

    this.partnerId = options.partnerId;
    this.partnerType = options.partnerType;

    this.rootElement = null;
}

PartnerTrade.prototype.constructor = PartnerTrade;

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

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

    instance.rootElement = $("<div>").addClass( "PartnerTrade" ).css( { "height" : "100%" });

    //create elements
    instance.createTabs()
    
    return instance.rootElement;
}

PartnerTrade.prototype.createTabs = function(){
    let instance = this;
    
    let tabPanelItems = [
        {  
            id: 'drafts', 
            title: 'Drafts', 
            template: function( itemData, itemIndex, element ) { 
                //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.claimsTabTemplate( instance ) )
                const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                const $content = $( "<div>" ).addClass( "drafts-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                $content.append( instance.draftsTabTemplate( instance ) );
                $root.append( $content );
            },
        }, 
        { 
            id: 'agreements', 
            title: 'Agreements', 
            template: function( itemData, itemIndex, element ) { 
                //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.agreementsTabTemplate( instance ) )
                const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                const $content = $( "<div>" ).addClass( "agreements-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                $content.append( instance.agreementsTabTemplate( instance ) );
                $root.append( $content );
            },
        }
    ];

    if( Fse.Portal.appConfiguration.STP.ownerType == "MFR" ) {
        tabPanelItems.push(
            { 
                id: 'claims', 
                title: 'Claims', 
                template: function( itemData, itemIndex, element ) { 
                    //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.claimsTabTemplate( instance ) )
                    const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                    const $content = $( "<div>" ).addClass( "claims-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                    $content.append( instance.claimsTabTemplate( instance ) );
                    $root.append( $content );
                }, 
            }, 
            { 
                id: 'tasks', 
                title: 'Tasks',
                template: function( itemData, itemIndex, element ) { 
                    //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.tasksTabTemplate( instance ) )
                    const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                    const $content = $( "<div>" ).addClass( "tasks-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                    $content.append( instance.tasksTabTemplate( instance ) );
                    $root.append( $content );
                }, 
            }, 
            { 
                id: 'payables', 
                title: 'Payables',
                template: function( itemData, itemIndex, element ) { 
                    //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.payablesTabTemplate( instance ) )
                    const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                    const $content = $( "<div>" ).addClass( "payables-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                    $content.append( instance.payablesTabTemplate( instance ) );
                    $root.append( $content );
                }, 
            }, 
            { 
                id: 'agreementRefs', 
                title: 'Agreement Refs', 
                template: function( itemData, itemIndex, element ) { 
                    //return $("<div>").css( { "padding" : "5px", "height" : "100%" } ).append( instance.agreementRefsTabTemplate( instance ) )
                    const $root = $( element ).css( { padding: "5px", height: "100%", display: "flex", flexDirection: "column" } );

                    const $content = $( "<div>" ).addClass( "agreementRefs-content" ).css( { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" } );

                    $content.append( instance.agreementRefsTabTemplate( instance ) );
                    $root.append( $content );
                },
            }
        )
    }

    instance.tabPanel = $( '<div id="tradeTabs">' ).dxTabPanel({
        dataSource: tabPanelItems,
        width: '100%',
        height : "100%",
        animationEnabled: true,
        swipeEnabled: false,
        loop: false,
        selectedIndex: 1,
    }).dxTabPanel( 'instance' );

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

PartnerTrade.prototype.draftsTabTemplate = function( data ) {
    let instance = this;

    if( instance.draftsTab ) {
        instance.draftsTab.element().remove();
        instance.draftsTab = null;
    }

    instance.draftsTab = new TradeDrafts( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.draftsTab.element();
}

PartnerTrade.prototype.agreementsTabTemplate = function( data ) {
    let instance = this;

    if( instance.agreementsTab ) {
        instance.agreementsTab.element().remove();
        instance.agreementsTab = null;
    }

    instance.agreementsTab = new TradeAgreements( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.agreementsTab.element();
}

PartnerTrade.prototype.claimsTabTemplate = function( data ) {
    let instance = this;

    if( instance.claimsTab ) {
        instance.claimsTab.element().remove();
        instance.claimsTab = null;
    }

    instance.claimsTab = new TradeClaims( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.claimsTab.element();
}

PartnerTrade.prototype.tasksTabTemplate = function( data ) {
    let instance = this;

    if( instance.tasksTab ) {
        instance.tasksTab.element().remove();
        instance.tasksTab = null;
    }

    instance.tasksTab = new TradeTasks( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.tasksTab.element();
}

PartnerTrade.prototype.payablesTabTemplate = function( data ) {
    let instance = this;

    if( instance.payablesTab ) {
        instance.payablesTab.element().remove();
        instance.payablesTab = null;
    }

    instance.payablesTab = new TradePayables( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.payablesTab.element();
}

PartnerTrade.prototype.agreementRefsTabTemplate = function( data ) {
    let instance = this;

    if( instance.agreementRefsTab ) {
        instance.agreementRefsTab.element().remove();
        instance.agreementRefsTab = null;
    }

    instance.agreementRefsTab = new TradeAgreementRefs( { partnerType: data.partnerType, partnerId: data.partnerId } );

    return instance.agreementRefsTab.element();
}