class BypassTokenGrantProposalDialog extends EICDialogContent {

    actions = [
        {
            label: 'Cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            disabled: false,
            role: 'cancel'
        },
        {
            label: 'Assign token to this proposal',
            onclick: this.consume.bind(this),
            severity: 'primary',
            disabled: false,
            role: 'consume'
        }
    ]

    status = '';
    mode = 'edit';
    validationInterval = 1000;
    
    DOMContentLoaded(options) {

console.log('==BypassTokenGrantProposalDialog==>', options)   

        this.models = options.models;
        this.mode = options.mode || this.mode;
        this.enableWizard = options.wizard;
        this.tokenId = options.tokenId;
        this.components = ui.eicfy(this.el);
        this.find('.fasttracks-propa').classList.add(this.mode)

        this.tabs = new Tab();
        this.tabs.addTabs(this.findAll('.tabs-extended menu li'), this.findAll('.fields-group'))

        let position = this.find('select[name="position"]');
        app.meta.toOptions('organisation-functions', null, true).forEach(item => position.append(item));
        
        this.find('[name="pic"]').value = options.pic;
        
        this.euid = this.components.find(component => component.el.name == 'euLoginId');
        this.firstname = this.components.find(component => component.el.name == 'firstname'); 
        this.lastname = this.components.find(component => component.el.name == 'lastname'); 
        this.email = this.components.find(component => component.el.name == 'email'); 
        this.userSearchButton = this.components.find(component => component.el.classList.contains('user-search'));
        this.cards =  this.components.filter(component => component.el.classList.contains('fields-group'))
        
        this.globalForm = new Form(this.el);
        this.miniForms = Array.from(this.cards.map(card=>card.el).map(el => new Form(el)))
        this.euid.onQuery = this.onUserSearch.bind(this)
        this.userSearchButton.el.addEventListener('click', this.onUserSearch.bind(this))
       
    }
    
    DOMContentFocused() {
        this.actions.forEach(o => o.button.disabled = true);
        this.models.token.viewToken(this.tokenId)
        .then(payload => { this.setMode(this.mode, payload) });
    }

    setMode(mode, payload) {
        this.find('.fasttracks-propa').classList.remove('loading');
        // cleanup 
        payload.token.granted = payload.token.granted ? ui.format.dateTime(payload.token.granted): ''
        payload.token.track = app.meta.toString('accelerator-tracks', payload.token.track)
        payload.token.domain = app.meta.toString('accelerator-tracks', payload.token.domain)
        payload.status = payload.token.history[0].status;
        if(!payload.token.project) payload.token.project = {}
            
        payload.token.project.submissiondate = payload.token.project.submissiondate ? ui.format.dateTime(payload.token.project.submissiondate): ''

        let fields = this.globalForm.scan();
        for(let field of fields) {
            let component = this.el2component(field.el.dataset.path, field.el.name);
            
            if(component) component.disabled = this.mode == 'read' || field.el.hasAttribute('disabled');
            
            let item = this.findField(payload, field.el.dataset.path, field.el.name)
            if(item) {
                if(component.el.type == 'checkbox'){
                    component.el.checked = item == true;
                }
                else 
                    component.value = item;
            }
        }

        switch(mode) {
            case 'read':
                ui.hide(this.find('.wizard-message'));
                ui.hide(this.find('.lookup'));
                ui.hide(this.find('.instructions'));
                ui.hide(this.actions.find(o => o.role == 'consume').button.el);
                this.actions.find(o => o.role == 'cancel').label = 'Close';

                break;
            case 'edit': 
                if(!this.enableWizard) 
                    ui.hide(this.find('.wizard-message'))
                else 
                    this.actions.find(o => o.role == 'cancel').label = 'Skip';
                
                this.tabs.selectByIndex(1);

                this.validationCheck = setInterval(this.validateTabs.bind(this), this.validationInterval);
                
                break;
        }

        this.actions.forEach(o => o.button.disabled = false);


    }
    
    el2component(path, name) {
        let item = this.components
        .find(o => 
            o.el.name == name &&
            ( !path || (path && o.el.dataset.path == path))
        )
        return item;
    }

    /**
     * Retrieves a data field value based on path an name
     * @param {*} path 
     * @param {*} name 
     * @returns 
     */
    findField(payload, path, name) {
        let levels = path && path != '' && path !== undefined ? path.split('.'): [];
        let tree = payload;

        for(let level of levels) 
            if(tree.hasOwnProperty(level)) tree = tree[level]; 
        if(tree.hasOwnProperty(name)) return tree[name];
    }

    onUserSearch(event) {
        this.userSearchButton.loading = true;
        this.models.users.search(this.euid.value).then(
            (userList => { 
                this.userSearchButton.loading = false;
                if(userList.length==0) return
                // TODO better manage if several (take most complete?)
        
                let user = userList[0];
                this.euid.value = user.uid;
                this.firstname.value = user.given_name;
                this.lastname.value = user.family_name;
                this.email.value = user.email;               
            }),
            (err) => {
                this.userSearchButton.loading = false;
            }
        );

    }

    validateTabs() {
        let valid = true;
        for(let form of this.miniForms) {
                
            let report = form.validate(true) 
            let badge = this.components.find(item => item.el.hasAttribute('eicbadge') && item.el.dataset.target == form.el.dataset.target)
            if(badge) {
                badge.value = report.issues;
            }
            valid = valid && report.valid;
        }

        this.actions.find(o => o.role == 'consume').button.disabled = !valid;
    }

    consume() {
        if(this.globalForm.validate()) {
            this.actions.find(o => o.role == 'consume').button.loading = true;
            this.actions.find(o => o.role == 'cancel').button.disabled = true;
            this.models.token.consumeToken(this.globalForm.value)
            .then( this.onConsumeSuccess.bind(this), this.onConsumeFailed.bind(this))
        } 
    }
 
    onConsumeSuccess() {
        this.actions.find(o => o.role == 'consume').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.commit(true);
    }

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

    DOMContentResized() {
        super.DOMContentResized();

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

        switch(device) {
            case 'desktop':
                this.tabs.triggers.forEach(item => ui.show(item));
                let current = this.tabs.getSelected();
                let target = current.dataset.target;
                this.findAll('article.fields-group').forEach(content => { if(content.dataset.target != target) ui.hide(content) });
                break;
            default:
                this.tabs.triggers.forEach(item => ui.hide(item));

                this.findAll('article.fields-group').forEach(content => { ui.show(content) })
                break;
        }
    }
}

app.registerClass('BypassTokenGrantProposalDialog',BypassTokenGrantProposalDialog);