import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, AfterContentInit, HostListener } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { } from '@types/googlemaps';

import { Observable } from 'rxjs/Observable';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager, JhiAlertService } from 'ng-jhipster';

import { Ticket } from './ticket.model';
import { TicketPopupService } from './ticket-popup.service';
import { TicketService } from './ticket.service';
import { Status, StatusService } from '../status';
import { Priority, PriorityService } from '../priority';
import { Category, CategoryService } from '../category';
import { Person, PersonService } from '../person';

declare var jquery: any;
declare var $: any;
declare var google: any;
declare var ymaps: any;

@Component( {
    selector: 'jhi-ticket-dialog',
    templateUrl: './ticket-dialog.component.html',
    styleUrls: ['./ticket-dialog.component.scss']
} )
export class TicketDialogComponent implements OnInit, AfterContentInit {

    @ViewChild( 'gmap' ) gmapElement: any;
    map: google.maps.Map;
    geocoder = new google.maps.Geocoder();
    ticket: Ticket;
    isSaving: boolean;
    statuses: Status[];
    priorities: Priority[];
    categories: Category[];
    people: Person[];
    person: any = {
        firstName: "",
        lastName: "",
        phone: "",
        address: "",
        email: "",
        password: "",
        city: "",
    }
    UserInput: any;
    marker: any;
    addPersonSection: boolean = false;
    addMapC: boolean = false;
    constructor(
        public activeModal: NgbActiveModal,
        private jhiAlertService: JhiAlertService,
        private ticketService: TicketService,
        private statusService: StatusService,
        private priorityService: PriorityService,
        private categoryService: CategoryService,
        private personService: PersonService,
        private eventManager: JhiEventManager,
        private datePipe: DatePipe
    ) {
    }

    @HostListener( 'document:keyup', ['$event'] )
    handleKeyboardEvent( event: KeyboardEvent ) {
        if ( event.key == "+" ) {
            this.addPersonSection = true;
            $( "#field_firstName" ).focus();
            this.switchButton();
            event.preventDefault();
        }
        if ( event.key == "-" ) {
            $( "#editForm" ).focus();
            this.addPersonSection = false;
            this.switchButton();
            event.preventDefault();
        }
        if ( event.key == "Enter" ) {
            this.save();
        }
        if ( event.key == "Insert" ) {
            this.addUser();
        }
        if ( event.key == "Esc" ) {
            this.activeModal.close( 'Esc' );
        }
    }

    ngOnInit() {
        this.isSaving = false;
        $( "#field_subject" ).focus();
        this.ticket.ticketDate = this.datePipe.transform( new Date(), 'yyyy-MM-ddThh:mm' );
        this.statusService.query()
            .subscribe(( res: HttpResponse<Status[]> ) => { this.statuses = res.body; if ( this.ticket.statusId == null ) this.ticket.statusId = this.statuses[0]; }, ( res: HttpErrorResponse ) => this.onError( res.message ) );
        this.priorityService.query()
            .subscribe(( res: HttpResponse<Priority[]> ) => { this.priorities = res.body; if ( this.ticket.priorityId == null ) this.ticket.priorityId = this.priorities[0]; }, ( res: HttpErrorResponse ) => this.onError( res.message ) );
        this.categoryService.query()
            .subscribe(( res: HttpResponse<Category[]> ) => { this.categories = res.body; if ( this.ticket.categoryId == null ) this.ticket.categoryId = this.categories[0]; }, ( res: HttpErrorResponse ) => this.onError( res.message ) );
        this.personService.query()
            .subscribe(( res: HttpResponse<Person[]> ) => { this.peopleArray = this.people = res.body; }, ( res: HttpErrorResponse ) => this.onError( res.message ) );
        if ( this.ticket != undefined && this.ticket.personId != undefined && this.ticket.personId["firstName"] && this.ticket.personId["lastName"] )
            this.UserInput = this.ticket.personId["firstName"] + ' ' + this.ticket.personId["lastName"];
    }

    switchButton() {
        if ( this.addPersonSection ) {
            $( "#addNewPerson" ).removeClass();
            $( "#addNewPerson" ).addClass( "btn btn-danger float-right jh-create-entity create-person" );
            $( "#minus" ).removeClass();
            $( "#minus" ).addClass( "fa fa-minus" );
        }
        else {
            $( "#addNewPerson" ).removeClass();
            $( "#addNewPerson" ).addClass( "btn btn-primary float-right jh-create-entity create-person" );
            $( "#minus" ).removeClass();
            $( "#minus" ).addClass( "fa fa-plus" );
        }
    }
    switchMap() {
        if ( this.addMapC ) {
            $( "#mapaDiv" ).css( "display", "block" )
            $( "#addMap" ).removeClass();
            $( "#addMap" ).addClass( "btn btn-danger float-right jh-create-entity create-person" );
            $( "#mapa" ).removeClass();
            $( "#mapa" ).addClass( "fa fa-minus" );
        }
        else {
            $( "#mapaDiv" ).css( "display", "none" )
            $( "#addMap" ).removeClass();
            $( "#addMap" ).addClass( "btn btn-primary float-right jh-create-entity create-person" );
            $( "#mapa" ).removeClass();
            $( "#mapa" ).addClass( "fa fa-plus" );
        }
    }

    ngAfterContentInit() {
        //        this.initMap();
        this.initYamp();
        $( "#mapaDiv" ).css( "display", "none" )
        $( document ).on( 'click', 'input[name="address"]', function() { this.select(); } );
    }

    initYamp() {
        ymaps.ready( function() {
            var myMap = new ymaps.Map( 'mmap', {
                center: [55.751574, 37.573856],
                zoom: 9
            }, {
                    searchControlProvider: 'yandex#search'
                } ),

                geolocation = ymaps.geolocation.get( {
                    provider: 'yandex',
                    mapStateAutoApply: true
                } ).then( function( result ) {
                    result.geoObjects.options.set( 'preset', 'islands#redCircleIcon' );
                    result.geoObjects.get( 0 ).properties.set( {
                        balloonContentBody: 'My location'
                    } );
                    myMap.geoObjects.add( result.geoObjects );
                } ),

                myPlacemark = new ymaps.Placemark( myMap.getCenter(), {
                    hintContent: 'A custom placemark icon',
                    balloonContent: 'This is a pretty placemark'
                }, {
                        /**
                         * Options.
                         * You must specify this type of layout.
                         */
                        iconLayout: 'default#image',
                        // Custom image for the placemark icon.
                        iconImageHref: 'images/myIcon.gif',
                        // The size of the placemark.
                        iconImageSize: [30, 42],
                        /**
                         * The offset of the upper left corner of the icon relative
                         * to its "tail" (the anchor point).
                         */
                        iconImageOffset: [-5, -38]
                    }
                );
            myMap.geoObjects
                .add( myPlacemark );
        } );
    }

    initMap() {
        this.map = new google.maps.Map( this.gmapElement.nativeElement, {
            // center: new google.maps.LatLng(this.myLocation.lat, this.myLocation.lng),
            zoom: 15
        } );
        this.geocoder = new google.maps.Geocoder();
        this.addMyMarker();
    }

    addMyMarker() {
        navigator.geolocation.getCurrentPosition(( position ) => {
            const myPoint = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );

            this.marker = new google.maps.Marker( {
                position: myPoint,
                draggable: true,
                map: this.map
            } );
            this.marker.addListener( 'dragend', ( event ) => {
                this.geocodePosition( this.geocoder, event.latLng );
                this.ticket.latitude = event.latLng.lat();
                this.ticket.longitude = event.latLng.lng();

            } );
            // Center the map on the new position
            this.map.setCenter( myPoint );
            this.geocodePosition( this.geocoder, this.marker.getPosition() );

        } );
    }

    codeAddress( geocoder, map, ticket ) {
        if ( this.ticket.address != null ) {
            geocoder.geocode( { 'address': this.ticket.address }, ( results, status ) => {
                if ( status === 'OK' ) {
                    if ( this.marker ) {
                        this.marker.setMap( null );
                    }
                    map.setCenter( results[0].geometry.location );
                    this.marker = new google.maps.Marker( {
                        map: map,
                        draggable: true,
                        position: results[0].geometry.location,
                        title: this.ticket.address

                    } );
                    this.marker.addListener( 'dragend', ( event ) => {
                        this.geocodePosition( geocoder, event.latLng );
                        this.ticket.latitude = event.latLng.lat();
                        this.ticket.longitude = event.latLng.lng();

                    } );
                    this.ticket.latitude = results[0].geometry.location.lat();
                    this.ticket.longitude = results[0].geometry.location.lng();

                } else {
                    alert( 'Geocode was not successful for the following reason: ' + status );
                }
            } );
        }
    }

    geocodePosition( geocoder, pos ) {
        geocoder.geocode( {
            latLng: pos
        }, ( responses ) => {
            if ( responses && responses.length > 0 ) {
                this.ticket.address = responses[0].formatted_address;
            } else {
                this.ticket.address = '';
            }
        } );
    }

    clear() {
        this.activeModal.dismiss( 'cancel' );
    }

    save() {
        this.isSaving = true;
        if ( this.UserInput == undefined || this.UserInput.trim() == "" || this.UserInput.split( " " ).length < 2 ) {
            return;
        }
        let ime = this.UserInput.split( " " )[0];
        let prezime = this.UserInput.split( " " )[1];

        if ( this.ticket.subject == undefined || this.ticket.subject == null || this.ticket.description == undefined || this.ticket.description == null || this.ticket.statusId == null || this.ticket.statusId == undefined )
            return;
        this.ticket.personId = this.people.find( obj => obj.firstName == ime && obj.lastName == prezime );
        if ( this.ticket.personId != null && this.ticket.personId != undefined ) {
            if ( this.ticket.id !== undefined ) {
                this.subscribeToSaveResponse(
                    this.ticketService.update( this.ticket ) );
            } else {
                this.subscribeToSaveResponse(
                    this.ticketService.create( this.ticket ) );
            }
        }
        this.activeModal.dismiss( 'save' );
    }

    addUser() {
        if ( this.person.phone[0] === '0' ) {
            this.person.phone = this.person.phone.substr( 1 );
            this.person.phone = '+381' + this.person.phone;
        }

        this.subscribeToAddUserResponse(
            this.personService.create( this.person ) );
        this.addPersonSection = !this.addPersonSection;
        this.switchButton();
    }

    private subscribeToAddUserResponse( result: Observable<HttpResponse<Person>> ) {
        result.subscribe(( res: HttpResponse<Person> ) =>
            this.onAddUserSuccess( res.body ), ( res: HttpErrorResponse ) => this.onAddUserError() );
    }

    private onAddUserSuccess( result: Person ) {
        this.personService.query()
            .subscribe(( res: HttpResponse<Person[]> ) => { this.peopleArray = this.people = res.body; }, ( res: HttpErrorResponse ) => this.onError( res.message ) );
        this.addPersonSection = false;
        this.UserInput = this.person.firstName + " " + this.person.lastName;
    }

    private onAddUserError() {
        // @TODO ?
        // prikazi gresku etc
    }

    private subscribeToSaveResponse( result: Observable<HttpResponse<Ticket>> ) {
        result.subscribe(( res: HttpResponse<Ticket> ) =>
            this.onSaveSuccess( res.body ), ( res: HttpErrorResponse ) => this.onSaveError() );
    }

    private onSaveSuccess( result: Ticket ) {
        this.eventManager.broadcast( { name: 'ticketListModification', content: 'OK' } );
        this.isSaving = false;
        this.activeModal.dismiss( result );
    }

    private onSaveError() {
        this.isSaving = false;
    }

    private onError( error: any ) {
        this.jhiAlertService.error( error.message, null, null );
    }

    trackStatusById( index: number, item: Status ) {
        return item.id;
    }

    trackPriorityById( index: number, item: Priority ) {
        return item.id;
    }

    trackCategoryById( index: number, item: Category ) {
        return item.id;
    }

    trackPersonById( index: number, item: Person ) {
        return item.id;
    }
    count = 0;
    peopleArray: Person[];
    search_word( event ) {
        this.peopleArray = [];
        for ( var i = 0; i < this.people.length; i++ ) {
            if ( this.people[i].firstName.toLowerCase().search( this.UserInput.toLowerCase() ) != -1 || this.people[i].lastName.toLowerCase().search( this.UserInput.toLowerCase() ) != -1 )
                this.peopleArray.push( this.people[i] );
        }
    }
}

@Component( {
    selector: 'jhi-ticket-popup',
    template: ''
} )
export class TicketPopupComponent implements OnInit, OnDestroy {

    routeSub: any;

    constructor(
        private route: ActivatedRoute,
        private ticketPopupService: TicketPopupService
    ) { }

    ngOnInit() {
        this.routeSub = this.route.params.subscribe(( params ) => {
            if ( params['id'] ) {
                this.ticketPopupService
                    .open( TicketDialogComponent as Component, params['id'] );
            } else {
                this.ticketPopupService
                    .open( TicketDialogComponent as Component );
            }
        } );
    }

    ngOnDestroy() {
        this.routeSub.unsubscribe();
    }
}