import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {AlertModal} from '../../utils/modal/alert';
import {ErrorCodes} from '../../utils/properties/errorCodes';

@Component({
    selector: 'search-dataprovider-map',
    template: `
    <!-- <a class="uk-icon" [href]="mapUrl" target="_blank"> -->
    <a  *ngIf="mapUrl && searchUtils.status != errorCodes.LOADING"
        [attr.uk-tooltip]="''" [title]="'Show all '+mapTooltipType+' in map'"
        (click)="openMapModal()" class="clickable">
      <span class="uk-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="location" ratio="1"><path fill="none" stroke="#000" stroke-width="1.01" d="M10,0.5 C6.41,0.5 3.5,3.39 3.5,6.98 C3.5,11.83 10,19 10,19 C10,19 16.5,11.83 16.5,6.98 C16.5,3.39 13.59,0.5 10,0.5 L10,0.5 Z"></path><circle fill="none" stroke="#000" cx="10" cy="6.8" r="2.3"></circle></svg>
      </span>
    </a>
    <span *ngIf="mapUrl && (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
          class="cursor-not-allowed ">
      <span class="uk-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="location" ratio="1"><path fill="none" stroke="#000" stroke-width="1.01" d="M10,0.5 C6.41,0.5 3.5,3.39 3.5,6.98 C3.5,11.83 10,19 10,19 C10,19 16.5,11.83 16.5,6.98 C16.5,3.39 13.59,0.5 10,0.5 L10,0.5 Z"></path><circle fill="none" stroke="#000" cx="10" cy="6.8" r="2.3"></circle></svg>
      </span>
    </span>
    <!-- </a> -->
    <modal-alert #AlertModalMap>
      <i-frame [url]="mapUrl" width="100%" height="900"></i-frame>
    </modal-alert>
    `
})

export class SearchDataproviderMapComponent {
    @Input() searchUtils;
    @Input() oldTotalResults:number = 0;
    @Input() loadPaging: boolean = true;
    @Input() totalResults:number = 0;
    @Input() mapUrl: string;
    @Input() mapTooltipType: string ="";
    @ViewChild(AlertModal) alertModalMap;

    public errorCodes:ErrorCodes = new ErrorCodes();

    constructor (private route: ActivatedRoute) {}

    ngOnInit() {}

    ngOnDestroy() {}

    openMapModal() {
        this.alertModalMap.isOpen = true;
        this.alertModalMap.cancelButton = true;
        this.alertModalMap.okButton = false;
        this.alertModalMap.alertTitle = "Map of Content Providers";
        this.alertModalMap.message = "";
        this.alertModalMap.cancelButtonText = "Close";
    }
}