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

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';
import { LinkOptions } from '@bci-web-core/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'bci-tab-demo',
  templateUrl: 'tab-demo.html',
  styleUrls: ['tab-demo.scss'],
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
})
export class TabDemoComponent {
  @ViewChild('tabGroup', {static: false}) tab : MatTabGroup;
  includeBackButton = true;
  inlineLinkOptions: LinkOptions = {
    url: '../master-detail/md-nested-tabs-demo',
    type: 'inline'
  }
  // Nav bar demo
  tabLinks = [
    { label: 'Sun', link: 'sunny-tab' },
    { label: 'Rain', link: 'rainy-tab' },
    { label: 'Fog', link: 'foggy-tab' },
  ];

  tabNavBackground: any = undefined;

  // Standard tabs demo
  tabs = [
    {
      label: 'Tab 1',
      content: 'This is the body of the first tab',
    },
    {
      label: 'Tab 2',
      disabled: true,
      content: 'This is the body of the second tab',
    },
    {
      label: 'Tab 3',
      extraContent: true,
      content: 'This is the body of the third tab',
    },
    {
      label: 'Tab 4',
      content: 'This is the body of the fourth tab',
    },
  ];

  // Dynamic tabs demo
  activeTabIndex = 0;
  addTabPosition = 0;
  tabAction = '';
  removeTabIndex = 0;
  gotoNewTabAfterAdding = false;
  createWithLongContent = false;
  dynamicTabs = [
    {
      label: 'Tab 1',
      content: 'This is the body of the first tab',
    },
    {
      label: 'Tab 2',
      disabled: true,
      content: 'This is the body of the second tab',
    },
    {
      label: 'Tab 3',
      extraContent: true,
      content: 'This is the body of the third tab',
    },
    {
      label: 'Tab 4',
      content: 'This is the body of the fourth tab',
    },
  ];
  customTabs = [...this.dynamicTabs];
  asyncTabs: Observable<any>;

  constructor() {
    this.asyncTabs = new Observable((observer: any) => {
      setTimeout(() => {
        observer.next(this.tabs);
      }, 1000);
    });
  }

  addTab(includeExtraContent: boolean): void {
    this.dynamicTabs.splice(this.addTabPosition, 0, {
      label: 'New Tab ' + (this.dynamicTabs.length + 1),
      content: 'New tab contents ' + (this.dynamicTabs.length + 1),
      extraContent: includeExtraContent,
    });

    if (this.gotoNewTabAfterAdding) {
      //The browser's attempt to set its selected index updated before our code to set the selected index is caused due to Javascript default behaviour
      //To solve this issue introduced setTimeout with 0 to schedule the callback to be run asynchronously, after the shortest possible delay
      setTimeout(() => {
        this.tab.selectedIndex = this.addTabPosition;
      },0)
    }
  }

  addCustomTab(includeExtraContent: boolean) {    
    this.tabAction = 'Add';
    this.customTabs.splice(this.addTabPosition, 0, {
      label: 'New Tab ' + (this.customTabs.length + 1),
      content: 'New tab contents ' + (this.customTabs.length + 1),
      extraContent: includeExtraContent,
    });
  }

  removeCustomTab(index) {
    this.tabAction = 'Delete';
    this.customTabs.splice(index, 1);
  }

  deleteTab(tab: any) {
    this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
  }

  swapTabLinks() {
    const temp = this.tabLinks[0];
    this.tabLinks[0] = this.tabLinks[1];
    this.tabLinks[1] = temp;
  }

  addToLabel() {
    this.tabLinks.forEach((link) => (link.label += 'extracontent'));
  }

  toggleBackground() {
    this.tabNavBackground = this.tabNavBackground ? undefined : 'primary';
  }

  scrollIntoView(id: string) {
    document.getElementById(id).scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
    });
  }
}

@Component({
  selector: 'bci-sunny-routed-content',
  template: 'This is the routed body of the sunny tab.',
})
export class SunnyTabContentComponent {}

@Component({
  selector: 'bci-rainy-routed-content',
  template: 'This is the routed body of the rainy tab.',
})
export class RainyTabContentComponent {}

@Component({
  selector: 'bci-foggy-routed-content',
  template: 'This is the routed body of the foggy tab.',
})
export class FoggyTabContentComponent {}
