/**
 * ng2-gm - Angular 2 components for Google Maps
 * @version v0.0.2
 * @link https://github.com/williampaulo/angular2-google-maps#readme
 * @license MIT
 */
import {Component, SimpleChange, OnChanges, ElementRef, OnInit} from '@angular/core';
import {RouterPanelManager} from '../services/router-panel-manager';
// import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
// import {SebmGoogleMapRouter} from './google-map-router';

/**
 * SebmGoogleMapRouterPanel renders a info window inside a {@link SebmGoogleMapMarker} or
 * standalone.
 *
 * ### Example
 * ```typescript
 * import {Component} from '@angular/core';
 * import {SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapRouterPanel} from
 * 'angular2-google-maps/core';
 *
 * @Component({
 *  selector: 'my-map-cmp',
 *  directives: [SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapRouterPanel],
 *  styles: [`
 *    .sebm-google-map-container {
 *      height: 300px;
 *    }
 * `],
 *  template: `
 *    <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
 *      <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
 *        <sebm-google-map-info-window [disableAutoPan]="true">
 *          Hi, this is the content of the <strong>info window</strong>
 *        </sebm-google-map-info-window>
 *      </sebm-google-map-marker>
 *    </sebm-google-map>
 *  `
 * })
 * ```
 */

@Component({
  selector: 'sebm-google-map-router-panel',
  providers: [RouterPanelManager],
  inputs: ['origin', 'destination', 'waypoints', 'showInfoPanel'],
  template: `
  <div [hidden]="visible" class="sebm-google-map-route-panel-content"></div>
  `
})
export class SebmGoogleMapRouterPanel implements OnChanges,
    OnInit {
  /**
   * address or latitude and longitude of the point of arrival of the route
   */
  origin: string;

  /**
   * address or latitude and longitude, starting position of the route
   */
  destination: string = '';

  /**
   * dress or latitude and longitude of waypoints on the route
   */
  waypoints: string[] = [];

  /**
   * All InfoWindows are displayed on the map in order of their zIndex, with higher values
   * displaying in front of InfoWindows with lower values. By default, InfoWindows are displayed
   * according to their latitude, with InfoWindows of lower latitudes appearing in front of
   * InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers.
   */
  showInfoPanel: boolean = false;

  /**
   * Maximum width of the infowindow, regardless of content's width. This value is only considered
   * if it is set before a call to open. To change the maximum width when changing content, call
   * close, update maxWidth, and then open.
   */
  maxWidth: number;

  /**
   * Holds the native element that is used for the info window content.
   */
  content: Node;

  constructor(private _routePanelManager: RouterPanelManager, private _el: ElementRef) {}

  ngOnInit() {
    this.content = this._el.nativeElement.querySelector('.sebm-google-map-route-panel-content');
  }

  /** @internal */
  ngOnChanges(changes: {[key: string]: SimpleChange}) {
    if ((changes['origin'] || changes['destination']) && typeof this.origin === 'string' &&
        typeof this.destination === 'string' && this.showInfoPanel === true) {
      this._routePanelManager.update(this);
    }
  }
}