class MailingFetchDialog extends EICDialogContent {

    actions = [
        {
            label: 'Cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'Use these recipients',
            onclick: this.add.bind(this),
            severity: 'primary',
            role: 'add',
            disabled: true
        }
    ]
   
    constructor(...args) {
        super(...args)
        Object.assign(this, app.helpers.activeAttributes)
        this.currentFilters = []
        this.currentQCId = null
        this.currentNbResults = 0
        this.baseColors = ['success','primary','danger','warning','accent','secondary']
    }

    DOMContentLoaded(options) {        
        this.contactsModel = options.models.contacts
        this.mailingsModel = options.models.mailings
        this.mid = options.mid
        const components = ui.eicfy(this.el)
        this.setupTriggers(components)
        this.setupRefs(components)
        this.components.searchType.disabled = true
        this.setAsyncLoading(true, ['searchType'])
        this.contactsModel.list().then(this.fillQCSelector.bind(this))
    }

    fillQCSelector(qcList){
        for(let query of qcList){
            this.components.searchType.el.append(ui.create(
                `<option value="${query.id}">${query.title}</option>`
            ))
        }
        this.components.searchType.disabled = false
        this.setAsyncLoading(false, ['searchType'])        
    }

    onsearchType(component, event){
        this.setAsyncLoading(true, ['searchCriteria'])   
        this.components.searchBtn.disabled = true
        this.contactsModel.get(component.value).then(this.buildForm.bind(this))
    }

    onSourceName(component, event){ this.changeAddBtnState() }

    buildForm(query){
        this.fieldNames = {}
        this.fieldColors = {}
        this.output('searchCriteria','')

        const tabsMenu = ui.create(`
            <menu eictab vertical class="searchCriteriaGroups" xsmall>
                ${query.group.map(queryGroup => `
                    <li>
                        ${queryGroup.title}
                    </li>
                `).join('\n')}
            </menu>
        `)
        const tabsDiv = ui.create(`<div class="cols-2 left"></div>`)
        this.outputs.searchCriteria.append(tabsDiv)

        for(let queryGroup of query.group){
            const groupEl = ui.create(`
                <article eiccard="" class="tab-content searchCriteriaGroups">
                    <header>
                        <h1>${queryGroup.title}
                            ${queryGroup.description ? `<span info="" class="icon-info" title="${queryGroup.description.replace('"','&quot;').replace(/\n/g, ' ')}"></span>`: ''}
                        </h1>
                    </header>
                    <section>
                    </section>
                </article>
            `)
            const sectionEl = groupEl.querySelector('section')
            let colIdx = 0
            for(let field of queryGroup.field){
                this.fieldNames[field.id] = field.title
                this.fieldColors[field.id] = {
                    severity: this.baseColors[colIdx % this.baseColors.length],
                    brightness: 100+(20*Math.floor(colIdx/this.baseColors.length))
                }
                colIdx++
                const el = ui.create(`
                    <div class="cols-2 field">
                        <div class="cols-2 field-label">
                            <label title="${field.description ? field.description.replace('"','&quot;'):''}">${field.title}</label>
                            ${field.description ? `<span info="" class="icon-info" title="${field.description.replace('"','&quot;').replace(/\n/g, ' ')}"></span>` : ''}
                        </div>
                    </div>
                `)
                if(!field.type) field.type='text'
                switch(field.type){
                    case 'list':
                        const selector = ui.create(`<select eicselect multiple name="${field.id}" lookup></select>`)
                        for(let value of field.value){
                            selector.append(ui.create(
                                `<option value="${value}">${value}</option>`
                            ))
                        }
                        el.append(selector)
                        break
                    case 'date':
                        el.append(ui.create(`<input eicinput type="date" name="${field.id}">`))
                        break
                    default:
                        el.append(ui.create(`<select eicselect  name="${field.id}" editable data-type="array" placeholder="One or several search values (hit enter after each)">`)) 

                }             
                sectionEl.append(el)
            }
            tabsDiv.append(groupEl)                
        }

        tabsDiv.prepend(tabsMenu)
        const groupsMenu = new Tab(tabsMenu)
        groupsMenu.addTabs(tabsDiv.querySelectorAll('menu.searchCriteriaGroups li'), tabsDiv.querySelectorAll('article.searchCriteriaGroups')); //Array.from(this.findAll('menu.searchCriteriaGroups li')).reverse()

        const components = ui.eicfy(this.outputs.searchCriteria)
        this.setAsyncLoading(false, ['searchCriteria'])
        this.filtersForm = new Form(this.outputs.searchCriteria)
        this.setupTriggers(components)
        this.components.searchBtn.disabled = false
    }

    onFiltersChange(component, event){
        this.currentQCId = this.components.searchType.value
        const formValues = this.filtersForm.value
        let fieldValues = Object.keys(formValues).map(k => ({id: k, value: formValues[k]}))
        this.currentFilters = fieldValues.filter(item => item.value.length>0)
        //this.setAsyncLoading(true, ['searchOutput'])
        this.components.searchBtn.loading = true
        this.contactsModel.getSample(this.currentQCId, this.currentFilters).then(
            this.fillSearchOutput.bind(this), 
            () => this.components.searchBtn.loading = false
                //this.setAsyncLoading(false, ['searchOutput'])
        )
    }

    fillSearchOutput(results){
        this.components.searchBtn.loading = false
       // this.setAsyncLoading(false, ['searchOutput'])
        this.output('searchOutput', `
            <alert eicalert small muted info>Total recipients: <b>${results.nbRows}</b></alert>
            <article eiccard collapsable>
                <header eicalert small muted info><h1>Quick Probe</h1></header>
                <section>
                    Email (or part of it)
                    <input eicinput="" type="search" name="emailProbe" data-ref="probeSearch"/>
                    <article eiccard class="probe-results"></article>
                </section>
            </article>
            <article eiccard collapsable>
                <header eicalert small muted info><h1>Results statistics</h1></header>
                <section>
                    <ul data-output="countersList"></ul>
                </section>
            </article>            
        `)     
        this.outputs.searchOutput.querySelectorAll('[eiccard]').forEach(el => { new Card(el) })
        this.outputs.searchOutput.querySelectorAll('[eicbutton]').forEach(el => { new Button(el) })
        const probeSearch =  new InputSearch(this.outputs.searchOutput.querySelector('[eicinput][type="search"]'))
        probeSearch.onQuery = this.onProbe.bind(this,probeSearch)
        this.fillCountersLegend(results.counters)
        this.currentNbResults = results.nbRows
        this.changeAddBtnState()
    }

    changeAddBtnState(){
        if((this.currentNbResults>0) && (this.components.sourceName.value.length>3)) this.actions.find(o => o.role == 'add').button.disabled = false
        else this.actions.find(o => o.role == 'add').button.disabled = true
    }

    onRefreshSample(component){
        this.components.sampleRefreshBtn.loading = true
        this.contactsModel.getSample(this.currentQCId, this.currentFilters).then(
            (results) => {
                const el = this.outputs.searchOutput.querySelector('.sample-list')
                el.innerHTML = results.rows.map(row => ('<li>'+row.email+'</li>')).join('')
                this.components.sampleRefreshBtn.loading = false
            }, 
            () => this.components.sampleRefreshBtn.loading = false
        )
    }

    onProbe(component){
        component.loading = true
        this.setAsyncLoading(false, ['quickprobe'])
        this.outputs.searchOutput.querySelector('article.probe-results').innerHTML = ''
        this.contactsModel.probe(this.currentQCId, this.currentFilters, component.value).then((payload) =>{
                this.fillProbeResults(payload)
                component.loading = false
            },            
            () => { component.loading = false }
        )
    }

    fillProbeResults(results){
        this.lastProbeResults = results
        this.lastProbeIndex = 0
        if(results.probeMatchesNumber==0){
            this.outputs.searchOutput.querySelector('article.probe-results').innerHTML = `<header>No email found containing that text.</header>`
            return
        }
        this.showProbeResult()
    }

    showProbeResult(){
        this.outputs.searchOutput.querySelector('article.probe-results').innerHTML = ''
        this.outputs.searchOutput.querySelector('article.probe-results').append(ui.create(`
            <header>
                <div>
                    <span>Found ${this.lastProbeResults.probeMatchesNumber} matching</span>
                    <span xsmall data-output="probeIndex"></span>
                </div>
                <span class="next-prev"></span>
            </header>
        `))
        this.outputs.searchOutput.querySelector('article.probe-results').append(ui.create(`<section></section>`))
        this.probeMaxIndex = this.lastProbeResults.probeMatchesNumber<20 ? this.lastProbeResults.probeMatchesNumber-1 : 19
        this.components.prevProbeShow = new Button(null, {
            label:'&lt;', 
            size: 'xxsmall',
            onclick: () => { 
                this.lastProbeIndex = (this.lastProbeIndex>0) ? this.lastProbeIndex-1 : this.probeMaxIndex
                this.showOneProbeMatch()
            }
        });
        this.outputs.searchOutput.querySelector('.next-prev').append(this.components.prevProbeShow.el)
        this.components.nextProbeShow = new Button(null, {
            label:'&gt;', 
            size: 'xxsmall',
            onclick: () => { 
                this.lastProbeIndex = (this.lastProbeIndex<(this.probeMaxIndex)) ? this.lastProbeIndex+1 : 0
                this.showOneProbeMatch()
            }
        });
        this.outputs.searchOutput.querySelector('.next-prev').append(this.components.nextProbeShow.el)

        this.showOneProbeMatch()
    }

    showOneProbeMatch(){
        const row = this.lastProbeResults.probeMatches[this.lastProbeIndex]
        let html='<ul>'
        for(const key of Object.keys(row)){
            html += `<li><div class='cols-2'>
                <b>${row[key].title}</b>
                <i>${Array.isArray(row[key].value) ? row[key].value.join(', ') : row[key].value}</i>
            </div></li>`
        }        
        html += '</ul>'
        this.outputs.searchOutput.querySelector('article.probe-results section').innerHTML = ''
        this.outputs.searchOutput.querySelector('article.probe-results section').append(ui.create(html))

        this.outputs.searchOutput.querySelector('[data-output="probeIndex"]').innerHTML = ` (Showing ${this.lastProbeIndex+1}/${this.probeMaxIndex+1})`
    }

    fillCountersLegend(counters){        
        const el = this.outputs.searchOutput.querySelector('[data-output="countersList"]')
        el.innerHTML = ''
        for(let counterName in counters) {
            const liel = ui.create(`
                <li>
                    <article eiccard collapsable collapsed>
                        <header><div>${counterName} <span eicchip xxsmall>${counters[counterName].nbUnique} unique</span></div></header>
                        <section>
                            <div class="cols-2 resultCounter">
                                <ul data-output="resultLegend"></ul>
                                <div data-output="resultPie"></div>
                            </div>
                        </section>
                    </alert>
                </li>
            `)
            el.append(liel)
            const ulel = liel.querySelector('[data-output="resultLegend"]')
            let colIdx = 0
            const pieData = []
            for(let value in counters[counterName].counters) {
                const severity =  this.baseColors[colIdx % this.baseColors.length]
                const brightness = 100-(20*Math.floor(colIdx/this.baseColors.length))
                ulel.append(ui.create(`
                    <li><div class="cols-2">
                            <div class="color-dot" style="background: var(--eicui-base-color-${(severity!='secondary') ? severity : 'grey'}-100);filter:brightness(${brightness}%");></div>
                            <div>
                                <b>${value}:</b>
                                <i>${ (100*counters[counterName].counters[value]/counters[counterName].total).toFixed(1) }% (${counters[counterName].counters[value]})</i>
                            </div>
                        </div>
                    </li>
                `))

                pieData.push({
                    value: counters[counterName].counters[value],
                    severity: severity,
                    brightness: `${brightness}%`,
                })
                colIdx++
            }
            new PieTreeChart(liel.querySelector('[data-output="resultPie"]'), {
                title: '',
                height: 200,
                data: pieData,
                angularGap: 1,
                innerRadius: 0,
                outerRadius: 50
            })

        }
        el.querySelectorAll('[eiccard]').forEach(el => { new Card(el) })
    }

    async add() {
        this.actions.find(o => o.role == 'add').button.loading = true
        this.currentQCId = this.components.searchType.value
        const formValues = this.filtersForm.value
        let fieldValues = Object.keys(formValues).map(k => ({id: k, value: formValues[k]}))
        this.currentFilters = fieldValues.filter(item => item.value.length>0)            
        await this.mailingsModel.saveImport(this.mid, {
            sourceName: this.components.sourceName.value,
            sourceType: 'Marklogic',
            data: null,
            availableColumns: null,
            query_id: this.currentQCId,
            query_params: this.currentFilters,
        })        
        this.commit(true) 
    }

    onFailed() {
        this.abort()
    }

}

app.registerClass('MailingFetchDialog',MailingFetchDialog);