class ApplicantMemberDialog extends EICDialogContent {

    actions = [
        {
            label: 'cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'remove',
            onclick: this.remove.bind(this),
            severity: 'danger',
            role: 'delete'
        },
        {
            label: 'add',
            onclick: this.create.bind(this),
            severity: 'primary',
            role: 'create'
        },
        {
            label: 'accept',
            onclick: this.accept.bind(this),
            severity: 'success',
            role: 'accept'
        },
        {
            label: 'reject',
            onclick: this.revoke.bind(this),
            severity: 'danger',
            role: 'reject'
        },
        {
            label: 'update',
            onclick: this.update.bind(this),
            severity: 'primary',
            role: 'update'
        },
    ]

    statuses = {
        active: {
            severity: 'success',
            label: 'This user is part of your organisation'
        },
        pending: {
            severity: 'warning',
            label: 'This user ask to be part of your organisation'
        }
    }
    async DOMContentLoaded(options) {

        this.mode = options.mode ? options.mode: 'read';
        
        app.meta.add('organisation-functions', app.Assets.Store.json['organisation-functions']);
        app.meta.add('organisation-genders', app.Assets.Store.json['organisation-genders']);

        this.model = options.model;
        this.pic = options.pic;

        let components = ui.eicfy(this.el);

        this.uid = components.find(component => component.el.name == 'uid'); 
        this.uid.value = options.uid || ''; 
        this.firstname = components.find(component => component.el.name == 'firstname'); 
        this.lastname = components.find(component => component.el.name == 'lastname'); 
        this.email = components.find(component => component.el.name == 'email'); 
        this.phone = components.find(component => component.el.name == 'phone'); 
        this.gender = components.find(component => component.el.name == 'gender');
        this.position = components.find(component => component.el.name == 'position');
        this.admin = components.find(component => component.el.name == 'admin');
        this.confirmDelete  = components.find(component => component.el.name == 'confirmDelete');
        this.confirmation = this.find('.confirmation');
        this.lookup = this.find('.lookup');
        this.status = this.find('.status');

        ui.hide(this.status);
        ui.hide(this.lookup);
        ui.hide(this.confirmation);

        app.meta.toOptions('organisation-genders', null, true).forEach(item => this.gender.el.append(item));
        app.meta.toOptions('organisation-functions', null, true).forEach(item => this.position.el.append(item));

        this.form = new Form(this.find('.member-form'));

        this.searchInput = components.find(component => component.el.name == 'search');     
        this.searchInput.onQuery =  this.onUserSearch.bind(this);
    }

    DOMContentFocused() {
        this.actions.find(o => o.role == 'create').button.hide();
        this.actions.find(o => o.role == 'delete').button.hide();
        this.actions.find(o => o.role == 'update').button.hide();
        this.actions.find(o => o.role == 'reject').button.hide();
        this.actions.find(o => o.role == 'accept').button.hide();

        if(this.mode != 'create') {
            this.model.read(this.pic, this.uid.value)
            .then( this.fill.bind(this));
        } else {
            this.setupMode(this.mode);
        }
    }

    fill(data) {
        this.uid.value = data.uid;
        this.firstname.value = data.firstname;
        this.lastname.value = data.lastname;
        this.email.value = data.email;
        this.phone.value = data.phone;
        this.gender.value = data.gender;
        this.position.value = data.position;
        this.admin.value = data.admin.toString();

        this.gender.disabled    = false;
        this.phone.disabled     = false;
        this.position.disabled  = false;
        this.admin.disabled     = false;

        let status = this.statuses[data.status];
        this.status.setAttribute(status.severity, '');
        this.status.innerHTML = status.label;

        // switch to review mode if user is pending
        if(this.mode == 'edit' &&  data.status == 'pending') this.mode = 'review';

        this.setupMode(this.mode)
    }

    setupMode(mode) {

        switch(this.mode) {
            case 'read':
                ui.show(this.status);
                this.gender.disabled    = true;
                this.phone.disabled     = true;
                this.position.disabled  = true;
                this.admin.disabled     = true;
                
                break;
            case 'edit':
                ui.show(this.status);
                if(this.uid.value != app.User.identity.uuid) this.actions.find(o => o.role == 'delete').button.show();
                this.actions.find(o => o.role == 'update').button.show();
                break;
            case 'review':
                ui.show(this.status);
                this.actions.find(o => o.role == 'reject').button.show();
                this.actions.find(o => o.role == 'accept').button.show();
                break;
            case 'create':
                ui.show(this.lookup);
                ui.hide(this.confirmation);
                ui.hide(this.status);
                this.actions.find(o => o.role == 'create').button.show();
                break;
        }
    }


    onUserSearch() {
        this.searchInput.loading = true;

        this.uid.value = '';
        this.firstname.value = '';
        this.lastname.value = '';
        this.email.value = '';
        this.phone.value = '';
        this.position.clear();
        this.gender.clear();

        this.model.search(this.searchInput.value).then(
            (userList => { 
                this.searchInput.loading = false;
                if(userList.length == 0) return
                // TODO better manage if several (take most complete?)
        
                let user = userList[0];
                this.uid.value = user.uid;
                this.firstname.value = user.given_name;
                this.lastname.value = user.family_name;
                this.email.value = user.email;               
            }),
            (err) => {
                if(err.code!=404) { // 404 is just unknown user, the display message as warning (via EIC-model) is enough then.
                    ui.growl.append('User lookup service is unavailable', 'danger')
                }
                this.searchInput.loading = false;
            }
        );

    }

    create(event) {                
        if(this.form.validate()) {
            this.actions.find(o => o.role == 'create').button.loading = true;
            this.actions.find(o => o.role == 'cancel').button.disabled = true;
            this.model.add(this.pic, this.uid.value, this.form.value)
            .then( this.onSuccess.bind(this), this.onFailed.bind(this))
        }
    }

    update(event) {                
        if(this.form.validate()) {
            this.actions.find(o => o.role == 'update').button.loading = true;
            this.actions.find(o => o.role == 'delete').button.disabled = true;
            this.actions.find(o => o.role == 'cancel').button.disabled = true;
            this.model.update( this.pic, this.uid.value, this.form.value )
            .then( this.onSuccess.bind(this), this.onFailed.bind(this))
        }
    }

    remove(event) {     

        ui.show(this.confirmation);

        if(this.confirmDelete.el.checked) {
            this.actions.find(o => o.role == 'update').button.disabled = true;
            this.actions.find(o => o.role == 'delete').button.loading = true;
            this.actions.find(o => o.role == 'cancel').button.disabled = true;
            console.log(this.pic, this.uid.value)
            this.model.revoke( this.pic, this.uid.value)
            .then( this.onSuccess.bind(this), this.onFailed.bind(this))
        }
    }

    revoke(event) {     

        ui.hide(this.confirmation);

        this.actions.find(o => o.role == 'accept').button.disabled = true;
        this.actions.find(o => o.role == 'reject').button.loading = true;
        this.actions.find(o => o.role == 'cancel').button.disabled = true;
        this.model.revoke( this.pic, this.uid.value)
        .then( this.onSuccess.bind(this), this.onFailed.bind(this))
    }

    accept(event) {                
        this.actions.find(o => o.role == 'reject').button.disabled = true;
        this.actions.find(o => o.role == 'accept').button.loading = true;
        this.actions.find(o => o.role == 'cancel').button.disabled = true;
        this.model.grant( this.pic, this.uid.value, this.form.value)
        .then( this.onSuccess.bind(this), this.onFailed.bind(this))
    }

    onSuccess() {
        this.actions.find(o => o.role == 'create').button.loading = false;
        this.actions.find(o => o.role == 'update').button.loading = false;
        this.actions.find(o => o.role == 'delete').button.loading = false;
        this.actions.find(o => o.role == 'accept').button.loading = false;
        this.actions.find(o => o.role == 'reject').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.commit(true);
    }

    onFailed() {
        this.actions.find(o => o.role == 'create').button.loading = false;
        this.actions.find(o => o.role == 'update').button.loading = false;
        this.actions.find(o => o.role == 'delete').button.loading = false;
        this.actions.find(o => o.role == 'accept').button.loading = false;
        this.actions.find(o => o.role == 'reject').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.abort();
    }
}

app.registerClass('ApplicantMemberDialog', ApplicantMemberDialog);