import {
  Component, ChangeDetectionStrategy, Output, EventEmitter, Input, ChangeDetectorRef, OnChanges
} from '@angular/core';
import isEmpty from 'lodash-es/isEmpty';

@Component({
  selector:        'app-detailed-targeting-controls',
  template:        `<div class="app-detailed-targeting__controls">
                      <ng-template ngFor let-control [ngForOf]="controls" let-last="last">
                        <a href=""
                           (click)="addControl.emit(control.key)">
                          {{control.translationKey | translate}}
                        </a>
                        <span *ngIf="!last">{{'app-detailed-targeting-controls.OR' | translate}}</span>
                      </ng-template>
                    </div>
                    `,
  styles:          [`
                      :host {
                        position: relative;
                        display: block;
                        font-size:   1.2rem;
                      }

                      a {
                        color: #50a9c9;
                      }
                    `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailedTargetingControlsComponent implements OnChanges {
  excludeControl       = {
    key:            'exclusions',
    translationKey: 'app-detailed-targeting-controls.EXCLUDE'
  };
  narrowControl        = {
    key:            'flexible_spec',
    translationKey: 'app-detailed-targeting-controls.NARROW'
  };
  narrowFurtherControl = {
    key:            'flexible_spec',
    translationKey: 'app-detailed-targeting-controls.NARROW_FURTHER'
  };

  controls = [this.excludeControl];

  @Input() formValue;
  @Output() addControl = new EventEmitter();

  ngOnChanges (changes) {
    const formValue = changes.formValue.currentValue;

    if (!formValue) {
      return;
    }

    this.controls = [];

    if (!formValue.hasOwnProperty('exclusions')) {
      this.controls.push(this.excludeControl);
    }

    // Flexible spec is valid if it is not empty
    const validFlexibleSpecs = formValue['flexible_spec'].filter((flexibleSpec) => !isEmpty(flexibleSpec));

    if (formValue['flexible_spec'].length === validFlexibleSpecs.length && validFlexibleSpecs.length > 0) {
      const control = validFlexibleSpecs.length === 1 ? this.narrowControl : this.narrowFurtherControl;
      this.controls.push(control);
    }

    this.changeDetectorRef.markForCheck();
    this.changeDetectorRef.detectChanges();
  }

  constructor (private changeDetectorRef: ChangeDetectorRef) {}
}