import { MainStateManager } from '../../MainStateManager';
import { TabPageData } from './TabData';
import { IControlsElementType } from '../TabbingControl';
import { IArmisaPageKey } from '../../ArmisaImportPage';
import { PropsOfPage } from '../BasePageData';
import { CaptionNaming, INaming } from '../../NamingCaption';

export class Tabing {
  private tabsOrder: TabPageData[] = [];

  private _tabs: TabPageData[] = [];
  get tabs() {
    return this._tabs;
  }
  get activeTab() {
    return this._tabs.find((i) => i.isActive);
  }
  private _hoveredTab: TabPageData | undefined = undefined;
  get hoveredTab() {
    return this._hoveredTab;
  }
  set hoveredTab(value: TabPageData | undefined) {
    this._hoveredTab = value;
  }

  helpModeState: boolean = false;
  toggelHelpMode = () => {
    this.helpModeState = !this.helpModeState;
    this.helpElementRef = undefined;
    this.fixZindex();
    // this.mainStateManager.Eventing.trigger('helpState');
  }
  helpElementRef?: IControlsElementType;
  setHelpElementRef = (element: IControlsElementType) => {
    this.helpElementRef = element;
    // this.mainStateManager.Eventing.trigger('helpState');
  }

  constructor(private mainStateManager: MainStateManager) { }

  addTab: {
    (caption: string, pageKey: IArmisaPageKey, isMainOfStacks?: boolean): void;
    (pageKey: IArmisaPageKey): void;
    (caption: INaming, pageKey: IArmisaPageKey): void;
    (caption: INaming, pageKey: IArmisaPageKey, props: PropsOfPage): void;
    (caption: string, pageKey: IArmisaPageKey, props: PropsOfPage, isMainOfStacks?: boolean): void;
  } = (...params: any): void => {
    const [param1, param2, param3, param4] = params;

    const newTab = new TabPageData(this.mainStateManager);

    if (param1 instanceof CaptionNaming && typeof param2 === 'string' && param3 === undefined) {
      newTab.caption = this.mainStateManager.getCaptionNaming(param1 as INaming);
      newTab.pageKey = param2 as IArmisaPageKey;
    } else if (
      (param1 instanceof Array &&
        typeof param2 === 'string' &&
        param3 instanceof PropsOfPage) ||
      (typeof param1 === 'string' &&
        typeof param2 === 'string' &&
        param3 instanceof PropsOfPage &&
        param4 === undefined)
    ) {
      newTab.caption = this.mainStateManager.getCaptionNaming(param1 as INaming);
      newTab.pageKey = param2 as IArmisaPageKey;
      newTab.props = param3;
    } else if (
      (typeof param1 === 'string' &&
        typeof param2 === 'string' &&
        param3 instanceof PropsOfPage) ||
      (typeof param1 === 'string' &&
        typeof param2 === 'string' &&
        param3 instanceof PropsOfPage &&
        typeof param4 === 'boolean')
    ) {
      newTab.caption = param1;
      newTab.pageKey = param2 as IArmisaPageKey;
      newTab.props = param3;
      newTab.isMainOfStacks = param4;
    } else if (typeof param1 === 'string' && typeof param2 === 'string') {
      newTab.caption = param1;
      newTab.pageKey = param2 as IArmisaPageKey;
      newTab.isMainOfStacks = param3;
    } else if (typeof param1 === 'string' && typeof param2 === 'undefined') {
      newTab.pageKey = param1 as IArmisaPageKey;
      // newTab.caption = this.mainStateManager.MenuIteming.getCaptionOfPage(
      //   param1 as IArmisaPageKey
      // );
    }
    this._tabs.push(newTab);
    this.tabsOrder.push(newTab);
    // this.mainStateManager.focusPosition = 'tabs';
    // this.mainStateManager.Eventing.trigger('addNewTab', newTab);
  };

  closeThisTab = (tab: TabPageData) => {
    tab.Eventing.removeOn('form.disabled');
    tab.Eventing.removeOn('form.getActive');

    tab.TabbingControl.removeAllControls();
    tab.ValidatingControl.removeAllControls();
    tab.ChangingControl.removeAllControls();

    // this.mainStateManager.Eventing.removeAllForThisPage(tab.id);

    this._tabs = this._tabs.filter((t) => t !== tab);
    this.tabsOrder = this.tabsOrder.filter((t) => t !== tab);

    const activeTab = this.tabsOrder[this.tabsOrder.length - 1];
    if (activeTab) {
      activeTab.isActive = true;
    }

    if (this._tabs.length === 0) {
      // this.mainStateManager.focusPosition = 'filterMenu';
    }
    // this.mainStateManager.Eventing.trigger('closeTab', activeTab);
  };
  selectThisTab = (tab: TabPageData) => {
    const newTabOrder = this.tabsOrder.filter((t) => t !== tab);
    newTabOrder.push(tab);
    this.tabsOrder = newTabOrder;
    // this.mainStateManager.focusPosition = 'tabs';
    // this.mainStateManager.Eventing.trigger('selectTab', tab);
  };

  private fixZindex = () => {
    if (this.helpModeState) {
      document.querySelector('.layout-sidebar-start')!.classList.add('z-index');
    } else {
      document.querySelector('.layout-sidebar-start')!.classList.remove('z-index');
    }
  }
}