/**
 */

class SoeDashboardView extends EICDomContent {

    DOMContentLoaded(options) {

        for(let model in options.models) this[model] = options.models[model];

        this.components = ui.eicfy(this.el);
        this.members = this.find('.members ul')
        this.list = new DataGrid(this.find('.description [eicdatagrid]'), {
            headers: [
                {label: 'PIC', filter: 'text', sortable: true},
                {label: 'company', filter: 'text', sortable: true},
                {label: 'instrument', filter: 'list', sortable: true},
                {label: 'cut-off', type: 'date', filter: 'text', sortable: true},
                {label: 'proposal number', filter: 'text', sortable: true},
                {label: 'acronym', filter: 'text', sortable: true},
                {label: 'funding', type: 'currency', sortable: true},
            ],
            height: 'calc(100vh - 360px)'
        })
        this.list.onRowClick = this.onProjectSelect.bind(this)
        
        this.soe.list().then( this.onListUpdated.bind(this));
        
        this.soe.members().then( this.onMembersUpdated.bind(this));

        app.events.channel.addEventListener('soe_update', this.onUpdateRequest.bind(this))
    }

    onUpdateRequest() { this.soe.list().then(this.onListUpdated.bind(this)); }

    onListUpdated(payload) {

        this.list.clear();

        let totalFB = 0;
        let totalFunding = 0;

        for(let item of payload) {
            this.list.addRow( JSON.stringify({ pic: item.company.pic, number: item.proposal.number }), [ 
                item.company.pic, 
                item.company.name, 
                item.instrument, 
                item.cutoffDate, 
                item.proposal.number, 
                item.proposal.acronym,
                item.totalFunding
             ])

             totalFunding += item.totalFunding;
             totalFB += parseInt(item.fundings);
        }

        this.find('.insights .items').innerHTML = totalFB;
        this.find('.insights .fundings').innerHTML = ui.format.currency( totalFunding );
        this.components.find(o => o.constructor.name == 'Card' && o.el.classList.contains('insights')).loading = false;

    }

    onMembersUpdated(payload) {
        
        this.members.innerHTML = '';

        let warnings = this.find('.members header h2')
        warnings.innerHTML = `<span eicchip xsmall success>${payload.length} members</span>`;

        for(let member of payload) {
            let li = ui.create(`<li class="cols-2 right middle" data-id="${member.uid}">
                        <div>
                            <div><b>${member.lastname} ${member.firstname}</b></div>
                            <div xsmall="" class="props">
                                <a href="mailto:${member.email}">${member.email}</a>
                            </div>
                        </div>
                        <span class="actions"></span>
                    </li>`);
            this.members.append(li);
        }
        this.components.find(o => o.constructor.name == 'Card' && o.el.classList.contains('members')).loading = false;

    }

    onProjectSelect(row) {

        let pic = 0;
        let number = 0;

        if(row.dataset.id != 0) {
            let ident = JSON.parse(row.dataset.id)

            pic = ident.pic;
            number = ident.number
        }
        
        app.Router.route(`/soe/companies/${pic}/projects/${number}/fundings`, { });
    }
}

app.registerClass('SoeDashboardView', SoeDashboardView);