/**
 */

class ProjectFundingExpertDashboardView extends EICDomContent {
    
    DOMContentLoaded(options) {
        this.components = ui.eicfy(this.el);

        for(let model in options.models) this[model] = options.models[model];
        
        this.list = this.find('.projects-list');
        /*
        this.list = new DataGrid(this.find('[eicdatagrid]'), {
            headers: [
                {label: 'number', filter: 'text', sortable: true},
                {label: 'acronym', filter: 'text', sortable: true},
                {label: 'organisation', filter: 'text', sortable: true},
                {label: 'phase', filter: 'list', sortable: true},
                {label: 'status', filter: 'list', sortable: true},
                {label: 'updated', type: 'dateTime', filter: 'list', sortable: true}
            ]
        });
        this.list.onRowClick = this.onProjectSelect.bind(this);
        this.list.loading = true;
        */
        app.events.channel.addEventListener('project_node_updated', this.onProjectUpdated.bind(this))

        this.projects.get('techdd')
        .then(this.refreshProjects.bind(this));
    }

    refreshProjects(data) {
        /*
        this.list.loading = false;
        this.list.clear();
        
        for(let item of data) {
            for(let phase of item.phases) {
                let id = JSON.stringify({
                    number: item.project.number,
                    node: phase.type,
                    nodeId: phase.id
                })
                this.list.addRow(id, [
                    item.project.number,
                    item.project.acronym,
                    item.organisation.name,
                    phase.type,
                    phase.statusHistory[0].value,
                    phase.statusHistory[0].dateTime
                ])
            }
            */
        this.list.innerHTML = '';

        for(let item of data) {
            
            for(let phase of item.phases) {

                if(phase.type != 'techdd') continue;
                let id = JSON.stringify({
                    number: item.project.number,
                    node: phase.type,
                    nodeId: phase.id
                })

                let version = 'Regular'

                switch(phase.version) {
                    case 'techdd-report-v1-enhanced':
                        version = 'Enhanced'
                        break;
                    case 'techdd-report-v1-full':
                        version = 'Full'
                        break;
                }

                let card = ui.create(`<article eiccard>
                        <header>
                            <h1>${item.project.acronym}</h1>
                            <h2>${item.project.number}</h2>
                        </header>
                        <section>
                            <div>
                                <span eicchip info>${version}</span>
                                <span eicchip primary>${app.meta.getItem('icmp-techdd-status', phase.statusHistory[0].value).label}</span>
                            </div>
                            <p small>${ui.format.dateTime(phase.statusHistory[0].dateTime)}</p>
                        </section>
                    </article>`);
                card.dataset.id = id;
                card.addEventListener('click', this.onProjectSelect)
                this.list.append(card)
            }
        }
    }

    onProjectSelect(event) {
        //let id = JSON.parse(row.dataset.id)
        let id = JSON.parse(event.currentTarget.dataset.id)
        app.Router.route(`/icmp/projects/${id.number}/${id.node}/${id.nodeId}`, { });
    }

    onProjectUpdated() {
        this.projects.get('techdd')
        .then(this.refreshProjects.bind(this));
    } 
}

app.registerClass('ProjectFundingExpertDashboardView',ProjectFundingExpertDashboardView);