import { Component, OnInit, Output, EventEmitter, OnDestroy, Input } from '@angular/core';
import { TranslatorService } from '../../services/translator/translator.service';
import { Platform, NavController } from '@ionic/angular';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'header-button',
  templateUrl: './header-button.component.html',
  styleUrls: ['./header-button.component.scss'],
})
export class HeaderButtonComponent implements OnInit {

  public static IOS = 'ios';
  public static ANDROID = 'android';
  @Input() image: string;
  @Input() title: string;
  @Output() triggered = new EventEmitter();
  public hide = false;
  public direction: string;
  public os = HeaderButtonComponent.IOS;
  public class = '';
  public routerSubscription: Subscription;
  constructor(
    public ts: TranslatorService,
    public platform: Platform,
    public router: Router
  ) {
    this.direction = TranslatorService.getCurrentDirection();
  }

  ngOnInit() {
    this.platform.ready().then(() => {
      this.os = this.platform.is('ios') ? HeaderButtonComponent.IOS : HeaderButtonComponent.ANDROID;
      this.setClass();
    });

    this.routerSubscription = this.router.events.subscribe((val) => {
      // see also 
      if (val instanceof NavigationEnd) {
        this.setClass('fadeOut');
      }
    });

  }

  public onClick() {
    this.triggered.emit();
  }

  public setClass(destroyEffect?: string) {
    if (this.direction === 'ltr') {
      this.class = 'email-' + this.os + ' ' + (destroyEffect ? destroyEffect : 'slideInRight') + ' right';
    } else {
      this.class = 'email-' + this.os + ' ' + (destroyEffect ? destroyEffect : 'slideInLeft') + ' left';
    }
  }

  public ngOnDestroy(): void {
    if (this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }
}
