class onboardingApplicantDialog extends EICDialogContent {

    actions = [
        {
            label: 'Back to profiles',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'Register to that organisation',
            onclick: this.register.bind(this),
            severity: 'success',
            role: 'register',
            disabled: true
        }
    ]

    status = '';
    
    DOMContentLoaded(options) {
        for(let model in options.models) this[model] = options.models[model];

        if(options.cancelLabel) this.actions.find(o => o.role == 'cancel').label = options.cancelLabel;

        this.profile = options.profile;
        let components = ui.eicfy(this.el);
        this.searchbar = this.find('.search');
        this.result = this.find('.result');
        this.howTo = new Form(this.find('.how-to'));
        this.unregistered = new Form(this.find('.unregistered-pic'));
        this.registered = new Form(this.find('.registered-pic'));
        this.query = components.find(component => component.el.dataset.path == 'query');
        this.query.onQuery = this.onSearch.bind(this);
        this.searchButton = components.find(component => component.el.classList.contains('search'));
        this.searchButton.el.addEventListener('click', this.onSearch.bind(this));
        
        ui.hide(this.result);
        ui.hide(this.registered.el);
        ui.hide(this.unregistered.el);
    }

    onSearch() {
        let pic = this.query.value.trim();
        if(!pic.match(/^\d{8,}$/)) return;

        this.searchButton.loading = true;

        ui.hide(this.result);
        
        this.user.searchOrganisation(pic)
        .then(this.onResult.bind(this), this.onEmptyResult.bind(this));
    }

    onResult(payload) {
        ui.show(this.result);
        this.howTo.hide()
        let organisation = payload[0]
        this.searchButton.loading = false;
        this.isRegistered = organisation.existsInMl
        let status = organisation.existsInMl ? 'warning': 'success';
        let message = organisation.existsInMl ? 
            'This company is already registered in the EIC plaform':
            'This company is not registered yet the EIC platform';
        
        this.result.innerHTML = `<div class="company" ${status} class="icon-success">
            <div><span class="legalname" primary>${organisation.legalName}</span></div>
            <div class="cols-3 top">
                <div><label>PIC</label><span class="pic">${organisation.pic}</span></div>
                <div><label>Country</label><span class="domain">${organisation.country || '(unknown)'}</span></div>
                <div><label>Location</label><span class="domain">${organisation.city || '(unknown)'}</span></div>
            </div>
        </div>
        <div eicalert ${status} ${organisation.existsInMl ? 'warning' : 'success' }>${message}</div>`;

        this.pic =  payload[0].pic;
        this.legalname =  payload[0].legalName;
        this.status = 'selecting'
        this.actions.find(o => o.role == 'register').button.disabled = false;
        this.actions.find(o => o.role == 'register').button.label = this.isRegistered ? 'Ask to join this organisation' : 'Register to that organisation'
    }

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

    onSelect() {
        this.findAll('[data-path="pic"]').forEach((item) => item.value = this.query.value )
        ui.hide(this.searchbar);
        ui.hide(this.result);
        this.form = !this.isRegistered ? this.unregistered: this.registered;
        
        ui.show(this.form.el);

        this.status = 'completing';
    }

    register() {
        switch(this.status) {
            case 'selecting':
                this.onSelect();
                break;
            case 'completing':
                if(this.form.validate()) {
                    this.actions.find(o => o.role == 'register').button.loading = true;
                    this.actions.find(o => o.role == 'cancel').button.disabled = true;
                    if(!this.isRegistered) {
                        this.user.registerOrganisationAccess(this.form.value)
                        .then( this.onRegisterSuccess.bind(this), this.onFailed.bind(this))
                    } else {
                        this.user.requestOrganisationAccess(this.form.value)
                        .then( this.onRequestSuccess.bind(this), this.onFailed.bind(this))
                    }
                }   
                break;
        }
    }

    onRegisterSuccess() {
        this.actions.find(o => o.role == 'register').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.commit({ request: 'register', pic: this.pic, legalname: this.legalname });
        ui.growl.append(`
            You have successfully registered to the organisation "${this.legalname}".<br>
            You will now be redirected to your dashboard...`,
            'success',5000)
        setTimeout(()=>{ 
            app.User.logout('/applicant') 
        }, 1000) 
    }

    async onRequestSuccess() {
        this.actions.find(o => o.role == 'register').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        this.commit({ request: 'join', pic: this.pic, legalname: this.legalname });
    }

    onFailed() {
        this.actions.find(o => o.role == 'register').button.loading = false;
        this.actions.find(o => o.role == 'cancel').button.disabled = false;
        ui.growl.append(`There was a technical issue trying to join you to the organisation "${this.legalname}".<br>
                         Please retry again later.`,
                         'danger',10000) 
        this.commit(false);
    }
}

app.registerClass('onboardingApplicantDialog',onboardingApplicantDialog);