class SubmissionShortForm2022View extends EICDomContent {

    options = {
        mode: 'read',
    }

    chunks = [];

    DOMContentLoaded(options) {

        // forcing read mode for legacy proposals
        for(let model in options.models) this[model] = options.models[model];

        ui.eicfy(this.el);
        
        this.tabs = new Tab();
        this.tabs.addTabs(this.findAll('.tabs-extended menu li'), this.findAll('.content'))
        
        this.pic = options.profile.pic;
        this.number = options.profile.number;
        
        this.form = new Form(this.find('.form'));
        
        this.members.list(this.pic,this.number).then(this.fillContributors.bind(this))
        
        this.fill(this.options.mode);
    }

    fill(mode) {
        let myTabsPath = 'projects/submissions/2022/tabs/'

        this.find('.tools .created .date').innerText = (new Date(this.submission.data.CreatedAt)).toLocaleString("en-DE");
        this.find('.tools .created .contributor').innerText = `(unknown user)`;

        let queue = [
            this.loadContent( myTabsPath+'SubmissionShortForm2022WhatView', {}, { model: this.submission })
            .then( view => this.appendTab('what', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022WhyView', {}, { model: this.submission })
            .then( view => this.appendTab('why', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022WhoView', {}, { model: this.submission })
            .then( view => this.appendTab('who', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022HowView', {}, { model: this.submission })
            .then( view => this.appendTab('how', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022AmountView', {}, { model: this.submission })
            .then( view => this.appendTab('amount', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022WhomView', {}, { model: this.submission })
            .then( view => this.appendTab('whom', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022ImpactView', {}, { model: this.submission })
            .then( view => this.appendTab('impact', view)),
            this.loadContent( myTabsPath+'SubmissionShortForm2022DocumentsView', {}, { model: this.submission })
            .then( view => this.appendTab('documents', view)),
        ]

        if(this.submission.data.status == 'draft') {
            
        } else {
            queue.push(
                this.loadContent( myTabsPath+'SubmissionShortForm2022StatusView', {}, { model: this.submission } )
                .then( view => {
                    this.appendTab('status', view);
                    this.statusTab = view;
                    view.el.addEventListener('withdraw', this.withdraw.bind(this));
                })
            )
        }

        Promise.allSettled(queue)
        .then((results) => {
            this.setupMode(mode)
            this.loaded = true;
        });

        this.refreshUpdated({
            date: this.submission.data.UpdatedAt, 
            contributor: {
                firstname: 'import',
                lastname: ''
            }})
    }

    setupMode(mode) {

        this.mode = mode;

        for(let chunk of this.chunks) {
            chunk.view.options.mode = mode;
            chunk.view.fill(mode);
        }
    }

    appendTab(target, view) { 
        this.chunks.push( {target: target, view: view} );
        this.find(`.content[data-part="${target}"]`).append(view.el) 
    }

    fillContributors(data) {
        let metrics = { contributors: 0, pending: 0 }
        this.find('.contributors').innerHTML = '';
        for(let item of data) {
            if(item.status == 'active') metrics.contributors++;
            if(item.status == 'pending') metrics.pending++;
        }
        this.find('.contributors').innerHTML = '';
        if(metrics.contributors > 0) {
            let chip = new Chip(null, {label: 'contributors', severity: 'primary', badge: metrics.contributors});
            chip.el.addEventListener('click', this.onContributorsEdit.bind(this))
            this.find('.contributors').append(chip.el);
        }
        if(metrics.pending > 0) {
            let chip = new Chip(null, {label: 'pending requests', severity: 'warning', badge: metrics.pending})
            chip.el.addEventListener('click', this.onContributorsEdit.bind(this))
            this.find('.contributors').append(chip.el);
        }
    }

    async withdraw(event) {
        this.submission.withdraw(this.pic, this.number, this.form.value)
        .then(async payload => {
            this.dispatchUpdate();
            ui.growl.append('Your proposal has been successfully withdrawn', 'success');
            this.unload();

        });
    }

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

        await this.openDialog(
            await this.loadContent(
                'projects/submissions/dialogs/SubmissionFormAccessDialog',
                {   title: 'Contributors to this proposal' }, { 
                    pic: this.pic,
                    number: this.number,
                    models: {
                        proposal: this.members,
                        organisation: new ApplicantMembersModel(['list'])
                    }
                }
            )
        ); 

        this.members.list(this.pic,this.number)
        .then(this.fillContributors.bind(this));

    }

    refreshUpdated(data) {
        this.find('.tools .updated .date').innerText = (new Date(data.date)).toLocaleString("en-DE");
        this.find('.tools .updated .contributor').innerText = `${data.contributor.firstname} ${data.contributor.lastname}`;
    }
    
    DOMContentResized() {
        super.DOMContentResized();

        let device = this.el.getAttribute('device');
        let tabs = this.find('.tabs-extended');

        switch(device) {
            case 'desktop':
                ui.show(tabs);
                let current = tabs.querySelector('.tab-selected');
                let part = current.getAttribute('data-target');
                this.findAll('.content[data-part]').forEach(content => { if(content.getAttribute('data-part') != part) ui.hide(content) });
                break;
            default:
                ui.hide(tabs);
                this.findAll('.content[data-part]').forEach(content => { ui.show(content) })
                break;
        }
    }
}

app.registerClass('SubmissionShortForm2022View', SubmissionShortForm2022View);