class MailingMappingDialog extends EICDialogContent {

    actions = [
        {
            label: 'Cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'cancel'
        },
        {
            label: 'Link',
            onclick: this.link.bind(this),
            severity: 'primary',
            role: 'link',
            disabled: false
        }
    ]
   
    DOMContentLoaded(options) {
        this.model = options.model        
        this.token = options.token
        this.sourceId = options.sourceId
        this.currentMailing = options.currentMailing
        this.oneMapping = this.currentMailing.mappings.find(item => item.sourceId==options.sourceId) || { mappings: {} }
        this.oneImport = this.currentMailing.imports.find(item => item.sourceId == options.sourceId)

        let value = this.oneMapping.mappings[this.token] ? this.oneMapping.mappings[this.token].value : null
        let components = ui.eicfy(this.el)

        this.warning = this.find('[data-output="warning"]')
        ui.hide(this.warning)

        this.selector = components.find(component => component.el.name == 'column')

        for(let column of this.oneImport.availableColumns ) {
            let opt = `<option value="${column.value}">Column ${XLSX.utils.encode_col(column.value)}`
            if(column.hint) {
                opt += ` (${(column.hint.length<51) ? column.hint : column.hint.slice(0,30)+'..…'})`
            }
            opt +='</option>'
            this.selector.el.append(ui.create(opt))
        }

        this.sampleGrid = new DataGrid(this.find('.sample-grid'), {
            headers: [ {label: 'Sample data'} ],
            height: '20vh'
        })

        this.selector.value = value
        this.selector.change(this.onColChange.bind(this));       
        this.onColChange()
        
        this.btResample = new Button(null, {icon: 'icon-refresh', rounded: true, size: 'xsmall', hint: 'Resample'})
        this.btResample.click = this.onColChange.bind(this)
        this.sampleGrid.el.querySelector('header .cell.actions').append(this.btResample.el)
        
    }

    onColChange(event){
        const size = Math.min(10, this.oneImport.dataCount)
        const colIdx = this.selector.value

        let warnings = []
        this.sampleGrid.clear()

        if(this.selector.value){
            for(let[idx, row] of this._makeSample(this.oneImport.data).entries()) {
                let value = String(row[colIdx] || '').trim() || `<span eicchip xsmall danger>Empty !</span>`
                this.sampleGrid.addRow( idx, [ value ] )
            }

            if(this.oneImport.data.some(row => (row[colIdx].trim()==''))){
                warnings.push('<div>Some value in this column are empty !</div>')
            }

            if(this.oneImport.availableColumns.find(c => c.value == colIdx).isEmail) {
                warnings.push('<div>Column used as recipients email address !</div>')
            } 

            let tokens = []
            for(let token in this.oneMapping.mappings) {
                if(this.oneMapping.mappings[token].value == colIdx && token != this.token) tokens.push(token)
            }
            if(tokens.length > 0) {
                warnings.push(`<div>Column already mapped to ${tokens.join(', ')} !</div>`)
            } 
            
        }

        this.warning.innerHTML = ''
        ui.hide(this.warning)

        if(warnings.length > 0) {
            ui.show(this.warning)
            this.warning.innerHTML = warnings.join('')
        }
    }

    _makeSample(arr){
        let sample = []
        let noDups = []
        for(let i=0; i<Math.min(10, arr.length); i++){ 
            let rowNb=Math.floor(Math.random() * arr.length)
            if(noDups.includes(rowNb)){ 
                i-- 
            } else {
                sample.push(arr[rowNb])
                noDups.push(rowNb)
            }
        } 
        return(sample)
    }

    async link() {
        const colIdx = parseInt(this.selector.value)
        if(!Number.isNaN(colIdx)) {
            this.actions.find(o => o.role == 'link').button.loading = true
            let curmap = this.currentMailing.mappings.find(item => item.sourceId==this.sourceId )
            curmap.mappings[this.token] = { value: colIdx, hint: this.oneImport.availableColumns[colIdx].hint  }
            await this.model.save(this.currentMailing) 
            this.commit(true)
        } else {
            this.commit(false)
        }
    }

}

app.registerClass('MailingMappingDialog',MailingMappingDialog);