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

import { AfterViewInit, Directive, DoCheck, ElementRef, HostBinding, HostListener, Input, IterableDiffers, Renderer2 } from '@angular/core';

@Directive({
  selector: '[bciTabNavigationCustomPadding]',
})
export class BciTabNavigationCustomPaddingDirective implements AfterViewInit, DoCheck{

  readonly STANDARD_PADDING = '32px';

  iterableDiffer;

  /**
   * Value to set styling of elements according to the user Input
   * ex: 12px, 10rem, 12% etc
   */
  @Input() bciTabNavigationCustomPadding = '';

  /**
   * For styling the tab navigation if back button is enabled on it
   */
  @Input() isBackButtonVisible: boolean;

  /**
   * list of tabs to adjust the position of inkbar of add/remove of new tab
   */
  @Input() tabs;

   /**
   * position where the new tab is added
   */
  @Input() addTabPosition: number;

  /**
   * position where the new tab is added
   */
  @Input() deleteTabPosition: number;

  /**
   * action on tab
   */
   @Input() tabAction: string;

  @HostBinding('class.responsive-tab') get bciResponsiveTabValue() {
    return this.bciTabNavigationCustomPadding === '' ? true : false;
  }

  @HostBinding('class.custom-tab-padding') get bciCustomTabValue() {
    return this.bciTabNavigationCustomPadding !== '' ? true : false;
  }

  constructor(private renderer: Renderer2,private elementRef: ElementRef,private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = this.iterableDiffers.find([]).create(null);
  }
  
  ngAfterViewInit() {
    this.setTabNavigationStyling();
    this.onResize();
  }

  ngDoCheck() {
      const changes = this.iterableDiffer.diff(this.tabs);
      if (changes) {
        setTimeout(() => {
          this.setStyleforTabs();
        }); 
      }
  }

  @HostListener('window:resize', ['$event'])
  onResize() {        
    const backButtonWithTab: any[]= this.elementRef.nativeElement.querySelectorAll(".tab-back-button");
    const divTabNavigation: any[]= this.elementRef.nativeElement.querySelectorAll(".tab-with-navigation");
    if(backButtonWithTab.length > 0) {
      const borderWidth = getComputedStyle(backButtonWithTab[0]).borderBottomWidth;
      const height = getComputedStyle(backButtonWithTab[0]).blockSize;
      const style = `top: calc(-${borderWidth} - ${height})`;   
      divTabNavigation[0].setAttribute('style', style);
    }
  }

  /**
   * To Set initial styling once the page is loaded
   */
  setTabNavigationStyling() {
    if(this.isBackButtonVisible) {      
      const backButtonWithTab = this.elementRef.nativeElement.querySelectorAll(".tab-back-button");
      this.renderer.setStyle(backButtonWithTab[0].children[0],'padding-left','0px');
      this.renderer.setStyle(backButtonWithTab[0].children[0],'margin-left',this.bciTabNavigationCustomPadding);
    } else {
      if(this.bciTabNavigationCustomPadding !== '') {
        const tabHeaders = this.elementRef.nativeElement.querySelectorAll(".mat-mdc-tab");
        this.renderer.setStyle(tabHeaders[0],'margin-left',this.bciTabNavigationCustomPadding);
      }
    }
    
    const tabBodyWrapper = this.elementRef.nativeElement.querySelectorAll(".mat-mdc-tab-body-wrapper");    
    this.renderer.setStyle(tabBodyWrapper[0],'padding-left',this.bciTabNavigationCustomPadding);
    this.renderer.setStyle(tabBodyWrapper[0],'padding-right',this.bciTabNavigationCustomPadding);
    this.setStyleforTabs();
  }

  /**
   * To set style for tab labels whenever any action is perfomed and tabs array is changed
   */
  setStyleforTabs() {
    const tabHeaders = this.elementRef.nativeElement.querySelectorAll(".mat-mdc-tab");
    tabHeaders.forEach((tab,index) => {

      if(this.isBackButtonVisible) {
        ( index === 0 && this.renderer.setStyle(tab,'margin-left', '16px'));
        ( index !== 0 && this.renderer.setStyle(tab,'margin-left','0px'));
      } else {
        (index === 0) && this.renderer.setStyle(tab,'margin-left',this.bciTabNavigationCustomPadding);
        (index !== 0 && this.renderer.setStyle(tab,'margin-left','0px'));
      }
    });
  }
}
