class SoeFeedbackFormDialog extends EICDialogContent {

    actions = [
        {
            label: 'Cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'Delete',
            onclick: this.delete.bind(this),
            severity: 'danger',
            role: 'delete',
            disabled: false
        },
        {
            label: 'Send',
            onclick: this.send.bind(this),
            severity: 'primary',
            role: 'send',
            disabled: false
        }
    ]

    // meta item ID for 'Other source'
    ALT_SOURCE_ID = 'dTVTpQG-KRzej86IwE0v7TA';

    constructor(options) { super(options); }

    DOMContentLoaded(options) {

        this.pic = options.pic;
        this.number = options.number;
        this.id = options.id;
        this.mode = options.mode || 'create';
        
        for(let model in options.models) this[model] = options.models[model];

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

        this.source = this.components.find(o => o.el.name == 'fundingSource')
        this.source.el.addEventListener('change', this.onSourceChange.bind(this))
        this.sourceExtra = this.components.find(o => o.el.name == 'fundingSourceOther')
        ui.hide(this.sourceExtra.el)
        this.scheme = this.components.find(o => o.el.name == 'cutoffDate')
        this.amount = this.components.find(o => o.el.name == 'fundingAmount')
        this.details = this.components.find(o => o.el.name == 'additionalDetails')
        this.duration = this.components.find(o => o.el.name == 'duration')
        this.successStory = this.components.find(o => o.el.name == 'successStory')
        this.successStory.el.addEventListener('change', this.onSuccessStoryChange.bind(this))
        this.successStoryDetails = this.components.find(o => o.el.name == 'successStoryDetails')
        ui.hide(this.successStoryDetails.container)
        this.successStoryDetails.el.classList.remove('required')

        this.confirmDelete  = this.components.find(component => component.el.name == 'confirmDelete');
        this.confirmation = this.find('.confirmation');
        ui.hide(this.confirmation);

        this.form = new Form(this.find('.soe-feedback.form'));
    }

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

        if(this.mode == 'edit') {
            this.fill(this.soe.getFeedback(this.id));
        } else {
            if(!this.soe.hasPrivilege('create')) {
                this.actions.find(o => o.role == 'send').button.hide();
            }
        }
    }

    fill(feedback) {
        this.source.value = feedback.fundingSource
        this.sourceExtra.value = feedback.fundingSourceOther
        this.scheme.value = feedback.cutoffDate
        this.amount.value = feedback.fundingAmount
        this.details.value = feedback.additionalDetails
        this.duration.value = feedback.duration
        this.successStory.value = feedback.successStory
        this.successStoryDetails.value = feedback.successStoryDetails

        if(this.soe.hasPrivilege('delete')) {
            this.actions.find(o => o.role == 'delete').button.show();
        }

        if(!this.soe.hasPrivilege('update')) {
            this.actions.find(o => o.role == 'send').button.hide();
        }

    }

    onSourceChange(event) {
        if(this.source.value.includes(this.ALT_SOURCE_ID)) {
            ui.show(this.sourceExtra.el)
        } else {
            this.sourceExtra.value = '';
            ui.hide(this.sourceExtra.el)
        }
    }

    onSuccessStoryChange(event) {
        if(this.successStory.value == 'true') {
            ui.show(this.successStoryDetails.container)
            this.successStoryDetails.el.classList.add('required')
        } else {
            ui.hide(this.successStoryDetails.container)
            this.successStoryDetails.el.classList.remove('required')
        }
    }

    send() {
        ui.hide(this.confirmation);

        if(this.form.validate()) {
            switch(this.mode) {
                case 'create':
                    this.actions.find(o => o.role == 'send').button.loading = true;
                    this.actions.find(o => o.role == 'cancel').button.disabled = true;
                    this.soe.create(this.pic, this.number, this.form.value)
                    .then( payload => this.commit(true) )
                    break;
                case 'edit': 
                    this.actions.find(o => o.role == 'send').button.loading = true;
                    this.actions.find(o => o.role == 'delete').button.disabled = true;
                    this.actions.find(o => o.role == 'cancel').button.disabled = true;
                    this.soe.update(this.pic, this.number, this.id, this.form.value)
                    .then( payload => this.commit(true) )
                    break;
            }
            
        }   
    } 

    delete() {
        ui.show(this.confirmation);

        if(this.confirmDelete.el.checked) {
            this.actions.find(o => o.role == 'send').button.disabled = true;
            this.actions.find(o => o.role == 'delete').button.loading = true;
            this.actions.find(o => o.role == 'cancel').button.disabled = true;
            this.soe.delete( this.pic, this.number, this.id )
            .then( payload => this.commit(true))
        }
    } 
}

app.registerClass('SoeFeedbackFormDialog', SoeFeedbackFormDialog);