import {ICellEditorAngularComp} from 'ag-grid-angular';
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {ICellEditorParams} from 'ag-grid-community';
import {IonSelect} from '@ionic/angular';

@Component({
    selector: 'cell-editor-multiselect',
    template: `
        <ion-select #select [(ngModel)]="value" style="padding: 0;"
                    [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}" multiple="true">
            <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
        </ion-select>
    `,
})
export class MultiSelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
    public params: ICellEditorParams;
    public value: string;

    public options: Array<{value: string}> = [];
    @ViewChild('select') select: IonSelect;

    agInit(params: ICellEditorParams): void {
        this.params = params;
        this.value = this.params.value;
        // @ts-ignore
        this.options = this.params.colDef.additionalData.options;
    }

    getValue(): any {
        return this.value;
    }

    ngAfterViewInit(): void {
        this.select.open();
    }
}