import { Component, EventEmitter, Injector, ViewChild, Output } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { LocationListDto, VehicleListDto, RouteTemplateListDto } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap';
import { PrimengTableHelper } from 'shared/helpers/PrimengTableHelper';
import { finalize } from 'rxjs/operators';
import * as jquery from 'jquery';
import * as moment from 'moment';
// import { DualListComponent } from 'angular-dual-listbox';
import * as routeFields from './controller-table-settings.json';
// import * as DualListbox from 'dual-listbox';
@Component({
    templateUrl: './controller-show-hide-modal.component.html',
    selector: 'controller-column',
    styleUrls: ['./controller-show-hide-modal.component.css']
})
export class ControllerShowHideComponent extends AppComponentBase {

    // format = { add: 'Add', remove: 'Remove', all: 'All', none: 'None',
    // direction: DualListComponent.LTR, draggable: true, locale: 'da' };

    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

   @ViewChild('createModal', {static: false}) modal: ModalDirective;
   @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
  
    filteredLocation: any;
    filteredVehicle: any;
    filteredRouteTemplate: any;

    loadDate: Date;
    departure: Date;
    completion: Date;

    locked = false;

    public DefaultDateValue: Date = new Date();

    constructor(
        injector: Injector
    ) {
        super(injector);
    }

    ngOnInit(){
        this.doReset();
    }

    show() {
        this.active = true;
        
        this.modal.show();
        
    }

    onShown(): void {
        //document.getElementById('cityInput').focus();
         $('.kt-select2').select2();
    }
    

    close(): void {
        this.active = false;
        this.modal.hide();
    }
    tab = 1;
	keepSorted = true;
	key: string;
	display: any;
	filter = false;
	source: Array<any>;
	confirmed: Array<any>;
	userAdd = '';
	disabled = false;

	sourceLeft = true;
	// format: any = DualListComponent.DEFAULT_FORMAT;

	private sourceStations: Array<any>;

	private confirmedStations: Array<any>;
    
    private fields: Array<any> = routeFields['STANDARD']['ROUTES']['fields'];


	// ngOnInit() {
	// 	this.doReset();
	// }

	private fieldName(item: any) {
		return item.name;
	}

	private useFieldName() {
		this.key = 'key';
		this.display = this.fieldName;
		this.keepSorted = true;
		this.source = this.sourceStations;
		this.confirmed = this.confirmedStations;
	}

	doReset() {
		this.sourceStations = JSON.parse(JSON.stringify(this.fields));
		this.confirmedStations = new Array<any>();
        this.useFieldName();
	}

	doDelete() {
		if (this.source.length > 0) {
			this.source.splice(0, 1);
		}
	}

	doCreate() {
		if (typeof this.source[0] === 'object') {
			const o = {};
			o[this.key] = this.source.length + 1;
			o[this.display] = this.userAdd;
			this.source.push( o );
		} else {
			this.source.push(this.userAdd);
		}
		this.userAdd = '';
	}

	doAdd() {
		for (let i = 0, len = this.source.length; i < len; i += 1) {
			const o = this.source[i];
			const found = this.confirmed.find( (e: any) => e === o );
			if (!found) {
				this.confirmed.push(o);
				break;
			}
		}
	}

	doRemove() {
		if (this.confirmed.length > 0) {
			this.confirmed.splice(0, 1);
		}
	}

	doFilter() {
		this.filter = !this.filter;
	}

	filterBtn() {
		return (this.filter ? 'Hide Filter' : 'Show Filter');
	}

	doDisable() {
		this.disabled = !this.disabled;
	}

	disableBtn() {
		return (this.disabled ? 'Enable' : 'Disabled');
	}

	swapDirection() {
		this.sourceLeft = !this.sourceLeft;
		// this.format.direction = this.sourceLeft ? DualListComponent.LTR : DualListComponent.RTL;
	}
}