import { CommonModule } from '@angular/common';
import {
  Component,
  ContentChildren,
  QueryList,
  AfterContentInit,
  ViewChild,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentRef,
  ComponentFactory,
} from '@angular/core';

import { DynTabsDirective } from 'app/dyn-tabs.directive';
import { DynTabComponent } from 'app/dyn-tab/dyn-tab.component';
import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
import { ResourcesLoaderService } from 'app/services/resources-loader.service';

@Component({
  standalone: true,
  imports: [DynTabsDirective, CommonModule],
  selector: 'jhi-dyn-tabs',
  templateUrl: './dyn-tabs.component.html',
  styleUrls: ['./dyn-tabs.component.scss'],
  providers: [MockCtxloaderService, ResourcesLoaderService],
})
export class DynTabsComponent implements AfterContentInit {
  //inizializzazioni
  dynamicTabs: DynTabComponent[] = [];

  @ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
  //@ViewChild(DynTabsDirective, {read: ViewContainerRef}) tabscontainer:ViewContainerRef;
  @ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
    this.tabs = {} as QueryList<DynTabComponent>;
    this.tabscontainer = {} as DynTabsDirective;
  }

  ngAfterContentInit(): void {
    // get all active tabs
    const activeTabs = this.tabs.filter(tab => tab.active);

    // if there is no active tab set, activate the first
    if (activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  //OPEN TAB
  openTab(title: string, template: any, data: any, isCloseable = false): void {
    // get a component factory for our TabComponent
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DynTabComponent);
    // fetch the view container reference from our anchor directive
    const viewContainerRef = this.tabscontainer.viewContainer;
    //istanza del component
    const componentRef = viewContainerRef.createComponent(componentFactory);
    // set the according properties on our component instance
    const instance: DynTabComponent = componentRef.instance;
    instance.tabTitle = title;
    instance.template = template;
    instance.dataContext = data;
    instance.isCloseable = isCloseable;
    // remember the dynamic component for rendering the
    // tab navigation headers
    this.dynamicTabs.push(componentRef.instance);
    // set it active
    this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
  }

  //TODO: ATTENZIONE-->nella direttiva Angular JHipster vuole questo sotto
  //selector: '[jhiDynTabs]'

  //SELECT TAB
  selectTab(tab: DynTabComponent): void {
    // deactivate all tabs
    this.tabs.toArray().forEach(tb => (tb.active = false));
    this.dynamicTabs.forEach(tb => (tb.active = false));

    // activate the tab the user has clicked on.
    tab.active = true;
  }

  // CLOSE TAB
  closeTab(tab: DynTabComponent): void {
    for (let i = 0; i < this.dynamicTabs.length; i++) {
      if (this.dynamicTabs[i] === tab) {
        // remove the tab from our array
        this.dynamicTabs.splice(i, 1);

        // destroy our dynamically created component again
        const viewContainerRef = this.tabscontainer.viewContainer;
        viewContainerRef.remove(i);

        // set tab index to 1st one
        this.selectTab(this.tabs.first);
        break;
      }
    }
  }

  //CLOSE ACTIVE TAB
  closeActiveTab(): void {
    const activeTabs = this.dynamicTabs.filter(tab => tab.active);
    if (activeTabs.length > 0) {
      // close the 1st active tab (should only be one at a time)
      this.closeTab(activeTabs[0]);
    }
  }
}