/*
 * Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { animate, style, transition, trigger } from '@angular/animations';
import {
  ChangeDetectorRef,
  Component,
  ContentChild,
  Directive,
  EventEmitter,
  Input,
  OnDestroy,
  OnInit,
  Output,
  TemplateRef,
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BciSharedIntl } from '../../shared-intl';

/**
 * Selector directive for custom header content.
 */
@Directive({
  selector: '[bciCommandbarSidebarSlideHeader]',
})
export class CommandbarSidebarSlideHeaderDirective {}

/**
 * Selector directive for custom footer content.
 */
@Directive({
  selector: '[bciCommandbarSidebarSlideFooter]',
})
export class CommandbarSidebarSlideFooterDirective {}

/**
 * A slide for the command bar sidebar.
 */
@Component({
  selector: 'bci-commandbar-sidebar-slide',
  templateUrl: './commandbar-sidebar-slide.component.html',
  styleUrls: ['./commandbar-sidebar-slide.component.scss'],
  animations: [
    trigger('slide', [
      transition('void => super', [
        style({ transform: 'translateX(-100%)' }),
        animate('.2s ease-in-out', style({ transform: 'translateX(0%)' })),
      ]),
      transition('super => void', [animate('.2s ease-in-out', style({ transform: 'translateX(-100%)' }))]),
      transition('void => sub', [
        style({ transform: 'translateX(100%)' }),
        animate('.2s ease-in-out', style({ transform: 'translateX(0%)' })),
      ]),
      transition('sub => void', [animate('.2s ease-in-out', style({ transform: 'translateX(100%)' }))]),
    ]),
  ],
})
export class CommandbarSidebarSlideComponent implements OnInit, OnDestroy {
  /**
   * The slide's title.
   */
  @Input() title: string;

  /**
   * The event emitter for the back button.
   */
  @Output() back = new EventEmitter<void>();

  /**
   * The event emitter for the confirm / apply button.
   */
  @Output() confirm = new EventEmitter<void>();

  /**
   * The key of the slide that is used for navigation / routing. Keep undefined for main slide.
   */
  @Input() key: string | undefined;

  /**
   * Internal attribute for animation handling.
   */
  animation: string;

  /**
   * Internal attribute for slide rendering.
   */
  active = false;

  @ContentChild(CommandbarSidebarSlideHeaderDirective, { read: TemplateRef }) customHeader: TemplateRef<any>;
  @ContentChild(CommandbarSidebarSlideFooterDirective, { read: TemplateRef }) customFooter: TemplateRef<any>;

  /** Used for component-wide unsubscription on destroy. **/
  private ngUnsubscribe = new Subject<void>();

  constructor(public intl: BciSharedIntl, private changeDetector: ChangeDetectorRef) {}

  ngOnInit() {
    this.intl.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => this.changeDetector.detectChanges());
    this.animation = !this.key ? 'super' : 'sub';
  }

  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
