import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { TargetingSpec } from '../../interfaces/targeting-spec.interface';

import isEqual from 'lodash-es/isEqual';

/**
 * Proxy component to be downgraded in angular1.
 */
@Component({
  selector:        'app-geo-wrapper',
  template:        `<app-geo [ngModel]="spec" (ngModelChange)="ngModelChange($event)"></app-geo>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GeoWrapperComponent {
  @Input() spec: TargetingSpec;
  @Output() change: EventEmitter<TargetingSpec> = new EventEmitter();

  ngModelChange (geoSpec: TargetingSpec) {
    if (isEqual(this.spec['geo_locations'], geoSpec['geo_locations']) &&
      isEqual(this.spec['excluded_geo_locations'], geoSpec['excluded_geo_locations'])) {
      return;
    }

    this.change.emit(geoSpec);
  }
}