class BypassTokenGrantDialog extends EICDialogContent {

    actions = [
        {
            label: 'Cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'Grant token',
            onclick: this.grant.bind(this),
            severity: 'primary',
            role: 'grant',
            disabled: true
        }
    ]

    status = '';
    
    DOMContentLoaded(options) {
        
        for(let model in options.models) this[model] = options.models[model];
        this.profile = options.profile;
        
        let components = ui.eicfy(this.el);
        
        this.searchbar = this.find('.search');
        this.result = this.find('.result');
        this.query = components.find(component => component.el.dataset.path == 'query');
        this.query.onQuery = this.onSearch.bind(this);
        this.trackSelect = components.find(component => component.el.dataset.path == 'track');
        this.domainSelect = components.find(component => component.el.dataset.path == 'domain');
        this.programmeSelect = components.find(component => component.el.dataset.path == 'programme');
        this.searchButton = components.find(component => component.el.classList.contains('search'));
        
        ui.hide(this.find('.programme'));
        this.programmeSelect.el.classList.remove('required');

        let tracks = app.meta.toOptions(app.meta.getCollection('accelerator-tracks'), this.profile.track, true);
        tracks.forEach(item => this.trackSelect.el.append(item));

        if(this.profile.track) {
            this.fillDomain(this.profile.track, this.profile.domain);
            //NIKE : Quickpatch because <option selected> is broken by the famous "couldn't care less update" in eicui
            this.trackSelect.value = this.profile.track 
            this.trackSelect.disabled = true;  

        } else {
            this.trackSelect.change(this.onTrackChange.bind(this));
        }

        if(this.profile.domain) {
            //NIKE : Quickpatch because <option selected> is broken by the famous "couldn't care less update" in eicui
            this.domainSelect.value = this.profile.domain
            this.domainSelect.disabled = true;
            // MFA: added this as it seems when using SPOCs, programmes were not handled
            this.fillProgramme(this.trackSelect.value, this.domainSelect.value);
        } else {
            this.domainSelect.change(this.onDomainChange.bind(this));
        }

        this.form = new Form(this.find('.explanation'));

        ui.hide(this.result)
        ui.hide(this.form.el)
        
        this.searchButton.el.addEventListener('click', this.onSearch.bind(this));
    }

    onTrackChange(event) {
        event.preventDefault();
        event.stopPropagation();
        
        if(this.trackSelect.value) {
            this.fillDomain(this.trackSelect.value);
        } else {   
            this.domainSelect.empty();
        }

        this.fillProgramme(this.trackSelect.value, this.domainSelect.value);
    }

    onDomainChange(event) {
        event.preventDefault();
        event.stopPropagation();
        
        this.fillProgramme(this.trackSelect.value, this.domainSelect.value);
    }

    fillDomain(track, domain) {
        let domains = track ? app.meta.toOptions(app.meta.getItem('accelerator-tracks', track).children, domain, true): [];
        this.domainSelect.empty();
        domains.forEach(item => this.domainSelect.el.append(item));
    }

    fillProgramme(track, domain) {
        
        ui.hide(this.find('.programme'));
        this.programmeSelect.empty();
        this.programmeSelect.el.classList.remove('required');
        this.programmeSelect.el.dataset.type = 'ignore';

        if(track == 'daTai94ymStyRbQWybH3eDw') {
            if(domain) {

                ui.lock();
                this.tokens.getPrograms(track, domain)
                .then(payload => {
                    ui.unlock();
                    if(payload.length > 0) {
                        ui.show(this.find('.programme'));
                        this.programmeSelect.el.classList.add('required');
                        this.programmeSelect.el.dataset.type = 'text';
                        this.programmeSelect.el.append(ui.create('<option value="">(select a program)</option>'))
                        for(let program of payload) {
                            this.programmeSelect.el.append(ui.create(`<option value="${program}">${program}</option>`))
                        }
                    } 
                });
            } 
        }
    }

    onSearch(event) {
        if(event) {
            event.stopPropagation();
            event.preventDefault();
        }
        this.query.value = this.query.value.trim();
        if(this.query.value != '') {
            ui.hide(this.result);
            this.searchButton.loading = true;
            this.company.search(this.query.value)
            .then(this.onResult.bind(this), this.onEmptyResult.bind(this));
        }
    }

    onResult(result) {
        ui.show(this.result);
        this.searchButton.loading = false;
        let hasToken = result.token && Object.keys(result.token).length > 0;
        let status = hasToken ? 'danger': 'success';
        let message = hasToken ? 
            'This company is already benefitting of the EIC Accelerator':
            'This company is elligible for the EIC Accelerator';
        
        this.result.innerHTML = `<div class="company" ${status} class="icon-success">
            <div><span class="legalname" primary>${result.legalname}</span></div>
            <div class="cols-3 top">
                <div><label>PIC</label><span class="pic">${result.pic}</span></div>
                <div><label>Country</label><span class="domain">${result.country || '(unknown)'}</span></div>
                <div><label>Location</label><span class="domain">${result.city || '(unknown)'}</span></div>
            </div>
        </div>
        <div eicalert ${status} success>${message}</div>`;

        this.actions.find(o => o.role == 'grant').button.disabled = true;

        // resolving user interaction
        if(!hasToken) {  
            //this.find('[data-path="pic"]').value 
            this.legalname = result.legalname;
            this.status = 'selecting'
            this.find('span.company').innerHTML = `${result.legalname} (${result.pic})`; 
            this.actions.find(o => o.role == 'grant').button.disabled = false;
        }
    }

    onEmptyResult() {
        ui.show(this.result);
        this.searchButton.loading = false;
        this.result.innerHTML = `<div eicalert danger>Sorry, this PIC is not registered</div>`;
        this.status = 'selecting';
        this.actions.find(o => o.role == 'grant').button.disabled = true;
    }

    onSelect() {
        this.find('[data-path="pic"]').value = this.query.value;    
        ui.hide(this.searchbar);
        ui.hide(this.result);
        ui.show(this.form.el);    

        this.status = 'completing';
    }

    grant() {
        switch(this.status) {
            case 'selecting':
                this.onSelect();
                break;
            case 'completing':
                if(this.form.validate()) {
                    this.actions.find(o => o.role == 'grant').button.loading = true;
                    this.actions.find(o => o.role == 'cancel').button.disabled = true;
                    this.company.grant(this.company.itemData.pic, this.form.value)
                    .then( this.onGrantSuccess.bind(this), this.onGrantFailed.bind(this))
                }   
                break;
        }
    }

    onGrantSuccess() {       
        this.actions.find(o => o.role == 'grant').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.commit(true);
    }

    onGrantFailed() {
        this.actions.find(o => o.role == 'grant').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.abort();
    }
}

app.registerClass('BypassTokenGrantDialog',BypassTokenGrantDialog);