import { Component, OnInit, OnDestroy, Input, Output, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import Sortable = require('sortablejs');

@Component({
    selector: 'cm-dragsort',
    templateUrl: './dragSort.component.html',
    styleUrls: ['./dragSort.component.less']
})

export class CosmosDragSortComponent implements OnInit, OnDestroy {

    @ViewChild('handllist') handllist: ElementRef;
    private sortable: Sortable;

    _chooseOptions: any[];

    _checkOptions: any[];

    @Input() set cmData(columnData: any[]) {
        for (let group of columnData) {
            for (let item of group['list']) {
                item['checked'] = item['checked'] ? true : false;
            }
        }
        this._checkOptions = columnData;
    }

    @Output() onSortEnd = new EventEmitter<any[]>();

    constructor() {
        this._chooseOptions = [];
    }

    ngOnInit() {
        this.sortable = Sortable.create(this.handllist.nativeElement, {
            handle: '.sortHandle',
            sort: true,
            animation: 150,
            ghostClass: "sortable-ghost",
            chosenClass: "sortable-chosen",
            onUpdate: (evt: any) => {
                this.onSortEnd.emit(this.getSortEndOptions());
            }
        });

    }

    private checkboxChange(event: any[], option: any) {
        if (option.checked) {
            this._chooseOptions.push(option);
            this.onSortEnd.emit(this.getSortEndOptions());
        } else {
            for (let index in this._chooseOptions) {
                if (this._chooseOptions[index] === option) {
                    this._chooseOptions.splice(Number(index), 1);
                    break;
                }
            }
        }
    }

    private getSortEndOptions(): any[] {
        return this._chooseOptions;
    }


    ngOnDestroy() {
        this.sortable.destroy();
    }

}