class ApplicantProposalSearchDialog extends EICDialogContent {
    
    actions = [
        {
            label: 'cancel',
            onclick: this.cancel.bind(this),
            severity: 'secondary',
            role: 'close'
        }
    ]

    DOMContentLoaded(options) {
        this.components = ui.eicfy(this.el);

        this.model = options.model;
        this.pic = options.pic;

        this.searchInput = this.components.find(component => component.el.name == 'search');
        this.searchInput.onQuery = this.search.bind(this);
        this.form = new Form(this.find('.search-form'));

        this.list = new DataGrid(this.find('.list'), {
            height: '240px',
            headers: [ 
                {label: 'number'},
                {label: 'acronym'},
                {label: 'version'},
                {label: 'status'},
            ]
        });

        this.search();
    }

    search() {
        this.searchInput.loading = true;
        this.model.search(this.pic, this.form.value)
        .then(this.fill.bind(this));
    }

    fill(data) {
        this.searchInput.loading = false;
        this.list.clear();

        for(let item of data) {
            

            let row = this.list.addRow(item, [ item.proposalNumber, item.acronym, item.version, item.status ])

            switch(item.accessStatus) {
                case 'active':
                    row.querySelector('.cell:last-child').append(ui.create(`<span eicchip small success>contributing</span>`));
                    break;
                case 'pending':
                    row.querySelector('.cell:last-child').append(ui.create(`<span eicchip small warning>request pending</span>`));
                    break;
                default: 
                    let button = new Button(null, {label: 'request access', size: 'small', severity: 'primary'});
                    button.el.dataset.number = item.proposalNumber;
                    button.addEventListener('click', this.requestAccess.bind(this));
                    row.querySelector('.cell:last-child').append(button.el);
            }
        }
    }

    async requestAccess(event) {
        event.stopPropagation();
        event.preventDefault();

        let button = new Button(event.currentTarget);
        button.loading = true;

        let number = button.el.dataset.number;
        this.model.apply(this.pic, number, app.User.identity.uuid)
        .then(async payload => {
            button.loading = false
            this.search();
        })
    } 
}

app.registerClass('ApplicantProposalSearchDialog',ApplicantProposalSearchDialog);