class MailingTestDialog extends EICDialogContent {

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

    constructor(...args) {
        super(...args)
        Object.assign(this, app.helpers.validators) 
    }

    DOMContentLoaded(options) {        
        this.model = options.model
        let components = ui.eicfy(this.el)
        this.form = new Form(this.find('.test-dialog'));
        this.mailInput = components.find(item => item.el.classList.contains('mail-address'))
        this.mailInput.el.addEventListener('keyup', this.checkEmail.bind(this))
        this.mailInput.el.addEventListener('focus', this.checkEmail.bind(this))
        this.mailInput.el.addEventListener('blur', this.checkEmail.bind(this))
        this.mailInput.value = app.User.identity.email
        this.tokensForm = components.find(item => item.el.classList.contains('tokens-form'))        
        if(options.tokens.length>0){
            ui.show(this.tokensForm.el, 'flex')
            this.fillTokenForm(options.tokens)
        } else {
            ui.hide(this.tokensForm.el)
        }
        if(this.validators.isValidEmail(this.mailInput.value)) this.actions[1].disabled = false
    }

    fillTokenForm(tokens){
        let markup = `<ul>
        <li>
            <div class="cols-2">
                <label>Token</label>
                <label>Value</label>
            </div>
        </li>`
        tokens.forEach(token => {
            markup += `<li>
                    <div class="cols-2">
                        <div><span eicchip small success>${token}</span></div>
                        <input eicinput type="text" name="${token}" data-path="tokenValues" eicinput value="" class="token-value">
                    </div>
                </li>
            `
        })
        markup += `</ul>`
        this.tokensForm.el.innerHTML = markup
    }
    
    checkEmail(event){
        if(event) {
            event.preventDefault()
            event.stopPropagation()
        }
        if(this.validators.isValidEmail(this.mailInput.value)){
            this.actions.find(o => o.role == 'send').button.disabled = false
        } else {
            this.actions.find(o => o.role == 'send').button.disabled = true
        }
    }

    send() {
        if(!this.validators.isValidEmail(this.mailInput.value)) return
        let data = this.form.value
        console.log(data)
        this.commit(data)
    }

    onFailed() {
        this.abort()
    }

}

app.registerClass('MailingTestDialog',MailingTestDialog);