/**
 */

class ProjectFundingProjectView extends EICDomContent {
    
    DOMContentLoaded(options) {
        
        this.number = options.projectNumber
        this.node = options.node;
        this.nodeId = options.nodeId;
        
        for(let model in options.models) this[model] = options.models[model];
        
        this.components = ui.eicfy(this.el);

        // reference to embedded articles
        this.panels = {
            project: this.components.find(o => o.el.classList.contains('project-info')),
            org: this.components.find(o => o.el.classList.contains('org-info'))
        }
        
        this.nav = new NodeMap(this.find('[eicnodemap]'), {
            "orientation": "linear",
            "resizable": true,
            "allowDrag": true,
            "entity": {
                "width": 150,
                "height": 50,
                "gap": 30
            }
        });
        this.nav.click = this.onProjectNodeSelect.bind(this);

        this.addEventTo('.button.aggregation', 'click', this.onAggregationSelect.bind(this))
        app.events.channel.addEventListener('project_node_updated', this.onProjectNodeUpdate.bind(this));
        this.panels.project.loading = true;
        this.panels.org.loading = true;

        this.project.get(this.number)
        .then(this.fillProject.bind(this));
    }

    DOMContentBlured() { 
        if(this.currentPart) {
            this.currentPart.DOMContentBlured()
        }
    }

    DOMContentRemoved() { 
        if(this.currentPart) {
            this.currentPart.DOMContentRemoved()
        }
    }

    DOMContentFocused() {
        if(this.currentPart) {
            this.currentPart.DOMContentFocused()
        }
    }

    fillProject(data) {

        this.panels.project.loading = false;
        this.panels.org.loading = false;

        this.find('.project-number span').innerHTML = data.project.number;
        this.find('.project-instrument span').innerHTML = app.meta.getItem('icmp-instruments', data.project.instrument).label;
        this.find('.project-cutoff span').innerHTML = ui.format.date(data.project.cutOffDate);
        this.find('.project-acronym').innerHTML = data.project.acronym;
        this.find('.project-title').innerHTML = data.project.title;
        this.find('.org-name span').innerHTML = data.organisation.name;
        this.find('.org-pic span').innerHTML = data.organisation.pic;
        this.find('.org-location .org-street').innerHTML = data.organisation.street || '';
        this.find('.org-location .org-postcode').innerHTML = data.organisation.postalCode || '';
        this.find('.org-location .org-city').innerHTML = data.organisation.city || '';
        this.find('.org-location .org-country').innerHTML = app.meta.getItem('icmp-countries', data.organisation.country).label;
        if(data.organisation.website) {
            this.find('.org-website span').innerHTML = `<a href="${ui.format.url(data.organisation.website)}" title="${data.organisation.name} website" target="_blank">${data.organisation.website}</a>`;
        } else {
            ui.hide(this.find('.org-website'))
        }
        this.find('.project-signature span').innerHTML = ui.format.date(data.project.signatureDate);
        this.find('.project-funding-type span').innerHTML = app.meta.getItem('icmp-fundings', data.project.fundingType).label;

        let active = 'info';

        let wf = {
            entities: [
                {
                    title: 'summary',
                    subtitle: '',
                    severity: 'primary',
                    data: {
                        id: 'info',
                        type: 'info'
                    }
                }
            ],
            relations: [ ]
        }
        
        let i = 0;
        for(let phase of data.phases) {
            // to be upgraded
            if(phase.type != 'kyc' && phase.type != 'equityAgreement') {

                wf.entities.push({
                    title: 'Tech DD',
                    subtitle: app.meta.getItem('icmp-techdd-status', phase.statusHistory[0].value).label,
                    severity: phase.active ? 'accent': 'primary',
                    data: {
                        id: phase.type + i,
                        type: 'techdd'
                    }
                })
                wf.relations.push({source: 'info', target: phase.type + i})
                if(phase.active) active = phase.type;
                i++;
            }

        }

        this.setupWorkflow(wf);
        this.onProjectNodeSelect({
            options: {
                data: {
                    type: active
                }
            }
        });
    }

    setupWorkflow(data) { this.nav.data = data; }

    loadPart(part) {

        let contentPath = 'projects/icmp/project/';

        if(this.currentPart) {
            if(this.currentPart.ref == part) return; 
            this.currentPart.DOMContentRemoved();
            this.currentPart = null;
        }

        this.find('.content').innerHTML = '';

        switch(part) {
            case 'info': 
                this.loadContent( contentPath + 'ProjectFundingInfoView', {}, { models: { project: this.project} } )
                .then( view => this.appendContent(part, view))
                break;
            case 'techdd': 

                ui.lock();

                app.User.getBusinessPermissions([ `/icmp/projects/${this.number}/${this.node}/${this.nodeId}` ])
                .then(async payload => {
                    
                    ui.unlock();

                    if(payload[`/icmp/projects/${this.number}/${this.node}/${this.nodeId}`].permissions.length > 0) {
                        this.loadContent( 
                            contentPath + 'ProjectFundingTechDDView', 
                            {}, 
                            { 
                                projectNumber: this.number,
                                nodeType: this.node,
                                nodeId: this.nodeId,
                                mode: 'edit',
                                models: { 
                                    project: this.project,
                                    techdd: new ICMPProjectNodeModel(payload[`/icmp/projects/${this.number}/${this.node}/${this.nodeId}`].permissions)
                                } 
                            })
                        .then( view => this.appendContent(part, view));
                    } else {
                        ui.growl.append('You don\'t have access to this resource', 'danger' );
                    }
                });
                

                break;
            case 'progressmeeting': 

                ui.lock();

                app.User.getBusinessPermissions([ `/icmp/projects/${this.number}/${this.node}/${this.nodeId}` ])
                .then(async payload => {
                    
                    ui.unlock();

                    if(payload[`/icmp/projects/${this.number}/${this.node}/${this.nodeId}`].permissions.length > 0) {
                        this.loadContent( 
                            contentPath + 'ProjectProgressMeetingView', 
                            {}, 
                            { 
                                projectNumber: this.number,
                                nodeType: this.node,
                                nodeId: this.nodeId,
                                mode: 'edit',
                                models: { 
                                    project: this.project,
                                    techdd: new ICMPProjectNodeModel(payload[`/icmp/projects/${this.number}/${this.node}/${this.nodeId}`].permissions)
                                } 
                            })
                        .then( view => this.appendContent(part, view));
                    } else {
                        ui.growl.append('You don\'t have access to this resource', 'danger' );
                    }
                });
                

                break;
            case 'docs': 
                this.loadContent( contentPath + 'ProjectFundingDocumentsView', {}, { models: { project: this.project} } )
                .then( view => this.appendContent(part, view))
                break;
            case 'history': 
                this.loadContent( contentPath + 'ProjectFundingHistoryView', {}, { models: { project: this.project} } )
                .then( view => this.appendContent(part, view))
                break;
            case 'team': 
                this.loadContent( contentPath + 'ProjectFundingTeamView', {}, { models: { project: this.project} } )
                .then( view => this.appendContent(part, view))
                break;
        }
    }

    appendContent(name, view) { 
        this.currentPart = view;
        this.currentPart.ref = name;
        this.find(`.content`).append(view.el); 
    }

    onAggregationSelect(event) { 
        event.stopPropagation();
        event.preventDefault();

        this.loadPart(event.currentTarget.dataset.target); 
    }

    onProjectNodeSelect(node) { 
        this.loadPart(node.options.data.type); 
    }

    onProjectNodeUpdate(event) {
        this.currentPart.ref = '';
        this.loadPart('techdd');
    }
}

app.registerClass('ProjectFundingProjectView',ProjectFundingProjectView);