class CoachingAdminDashboardView extends EICDomContent {

    DOMContentLoaded(options) {

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

        ui.eicfy(this.el);

        this.workflow = new NodeMap(this.find('[eicnodemap]'), {
            "orientation": "radial",
            "resizable": true,
            "allowDrag": true,
            "entity": {
                "width": 150,
                "height": 50,
                "gap": 30
            }
        });

        app.Assets.loadJson({name:'workflows/wf-coaching-admin.json'})
        .then(this.setupWorflow.bind(this));

        //this.workflow.click = this.testBadge.bind(this)

        this.filters = new Tab();
        this.filters.addTabs(Array.prototype.slice.call(this.findAll('.filter button.menu')).reverse(), this.findAll('.filter'));

        this.results = new Tab();
        this.results.addTabs(this.findAll('.result-menu li'), this.findAll('.result'));

        this.coachingList = new DataGrid(this.find('.coachings [eicdatagrid]'), {
            headers: [
                {label: 'number', filter: 'text'},
                {label: 'type', filter: 'list'},
                {label: 'project', filter: 'text'},
                {label: 'owner', filter: 'text'},
                {label: 'status', filter: 'list'},
                {label: 'credits used'},
                {label: 'credits left'},
                {label: ''}
            ]
        });
        this.coachingList.onRowClick = this.onCoachingSelect.bind(this);

        this.organisationList = new DataGrid(this.find('.organisations [eicdatagrid]'), {
            headers: [
                {label: 'pic', filter: 'text'},
                {label: 'name', filter: 'text', sortable: true},
                {label: 'projects', sortable: true},
                {label: ''}
            ]
        });
        this.organisationList.onRowClick = this.onOrganisationSelect.bind(this);


        this.coachList = new DataGrid(this.find('.coaches [eicdatagrid]'), {
            headers: [
                {label: 'eu login', filter: 'text'},
                {label: 'name', filter: 'text'},
                {label: 'email', filter: 'text'},
                {label: 'invitations'},
                {label: 'coachings'},
                {label: ''}
            ]
        });
        this.coachList.onRowClick = this.onCoachSelect.bind(this);

        this.coachings.getCoachings().then(this.fillCoachings.bind(this));
        this.coachings.getCompanies().then(this.fillCompanies.bind(this));
        this.coachings.getCoaches().then(this.fillCoaches.bind(this));
    }

    setupWorflow(data) {
        console.log(data)
        this.workflow.data = data;
    }

    fillCoachings(list) {
        this.coachingList.clear();

        for(let item of list) {
            
            let row = this.coachingList.addRow( item.reference, [ 
                item.number, 
                item.type, 
                item.acronym, 
                item.organisation, 
                item.status, 
                item.creditsUsed, 
                item.creditsLeft,
                ''
            ]);

            let button = new Button(null, { label: 'refill', severity: 'primary', size: 'xsmall' })
            button.el.addEventListener('click', this.onCreditsAdd.bind(this))
            row.querySelector('.cell:nth-child(9)').append(button.el)
        }
    }

    fillCompanies(list) {
        this.organisationList.clear();

        for(let item of list) {
            
            let row = this.organisationList.addRow( item.pic, [ 
                item.pic, 
                item.legalname, 
                item.projects.length
            ]);

            let button = new Button(null, { icon: 'icon-angle-down', size: 'xsmall', rounded: true })
            button.addEventListener('click', this.onOrganisationProjects.bind(this))
            row.querySelector('.cell:nth-child(5)').append(button.el)
        }
    }

    fillCoaches(list) {
        this.coachList.clear();

        for(let item of list) {
            
            let row = this.coachList.addRow( item.id, [ 
                item.uid, 
                item.lastname + ' ' + item.firstname, 
                item.email, 
                item.invitations, 
                item.coachings
            ]);

            let button = new Button(null, { icon: 'icon-angle-down', size: 'xsmall', rounded: true })
            row.querySelector('.cell:nth-child(7)').append(button.el)
        }
    }

    async onCreditsAdd(event) {
        event.stopPropagation();
        event.preventDefault();

        let result = await this.openDialog(
            await this.loadContent(
                'coachings/admin/dialogs/CoachingCreditsDialog',
                { title: 'Add coaching credits' }, 
                { models: { } }
            )
        );
    }

    onCoachingSelect(row, event) {
        event.stopPropagation();
        event.preventDefault();
        let id = row.dataset.id;

        app.Router.route(`/coachings/coaching/${id}`, { });
    }
    
    onOrganisationProjects(event) {
        event.stopPropagation();
        event.preventDefault();

        let row = event.currentTarget.closest('.row');


        if(this.currentOrganisationProjects) {
            this.currentOrganisationProjects.remove();
        }

        let projects = ui.create(`
            <article eiccard class="sublist" primary>
                <section>
                    <div eicdatagrid footer="hidden"></div>
                </section>
            </article>
        `);

        let grid = new DataGrid(projects.querySelector('[eicdatagrid]'), {
            headers: [
                {label: 'number'},
                {label: 'acronym'},
                {label: 'type'},
                {label: 'status'},
                {label: 'credits used'},
                {label: 'credits left'},
                {label: ''},
            ]
        });

        let organisation = this.coachings.getOrganisation(row.dataset.id);
        
        for(let item of organisation.projects) {
            console.log(item)
            let row2 = grid.addRow( item.reference, [ 
                item.number, 
                item.acronym, 
                item.type, 
                item.status, 
                item.creditsUsed, 
                item.creditsLeft,
                ''
            ]);

            let button = new Button(null, { label: 'refill', severity: 'primary', size: 'xsmall' })
            button.el.addEventListener('click', this.onCreditsAdd.bind(this))
            row2.querySelector('.cell:nth-child(8)').append(button.el)
        }

        row.after(projects);

        this.currentOrganisationProjects = projects;
    }

    onOrganisationSelect(row, event) {
        event.stopPropagation();
        event.preventDefault();
    }

    onCoachSelect(row, event) {
        event.stopPropagation();
        event.preventDefault();

        let id = row.dataset.id

        app.Router.route(`/coachings/coaches/${id}`, { });
    }

}

app.registerClass('CoachingAdminDashboardView', CoachingAdminDashboardView);