import { ValidatingControl } from '../ValidatingControl';
import { ChangingControl } from '../ChangingControl';
import { BasePageData, PropsOfPage } from '../BasePageData';
import { TabbingControl } from '../TabbingControl';
import { MainStateManager } from '../../MainStateManager';
import { TouchingControl } from '../TouchingControl';
import { IArmisaPageKey } from '../../ArmisaImportPage';
import { ModalPageData } from './ModalData';

export type TLocationPopup = 'top' | 'right' | 'bottom' | 'left';
export class MouseLocationProps {
  constructor(
    public X: number,
    public Y: number,
  ) { }
  static buildFromMouseEvent(e: React.MouseEvent) {
    return new MouseLocationProps(e.clientX, e.clientY);
  }
}

export interface IPopupOptiton {

}

export class PopupPageData extends BasePageData {
  public backdropElement: HTMLDivElement;
  public mainElement: HTMLDivElement;

  public get any(): any {
    return this;
  }

  constructor(
    maniStateManage: MainStateManager,
    public parent: BasePageData,
    mouseLocation?: MouseLocationProps | React.MouseEvent,
    location?: TLocationPopup,
    byArrow?: boolean,
  ) {
    super(maniStateManage);

    this.backdropElement = document.createElement('div');
    this.backdropElement.classList.add('backdrop-popup');
    // this.backdropElement.style.zIndex = `${4000 + this.mainStateManager.Modaling.modals.length      }`;

    this.mainElement = document.createElement('div');
    this.mainElement.classList.add('popup');
    if (mouseLocation instanceof MouseLocationProps) {
      this.mainElement.style.left = `${mouseLocation.X}px`;
      this.mainElement.style.top = `${mouseLocation.Y}px`;
    } else if (typeof mouseLocation === 'object') {
      this.mainElement.style.left = `${mouseLocation.clientX}px`;
      this.mainElement.style.top = `${mouseLocation.clientY}px`;
    } else {
      this.backdropElement.classList.add('back-drop')
    }

    if (byArrow) {
      this.mainElement.classList.add('arrow');
    }

    if (location && mouseLocation) {
      this.mainElement.classList.add(location);
    }
    // this.mainElement.style.zIndex = `${4000 + this.mainStateManager.Modaling.modals.length      }`;


    this.backdropElement.onclick = this.closeThisPage;
  }

  public TouchingControl: TouchingControl = new TouchingControl(this);
  public TabbingControl: TabbingControl = new TabbingControl(this);
  public ValidatingControl: ValidatingControl = new ValidatingControl(this);
  public ChangingControl: ChangingControl = new ChangingControl(this);

  protected _modal?: ModalPageData;
  public get modal(): ModalPageData | undefined {
    return this._modal;
  }
  public set modal(value: ModalPageData | undefined) {
    this._modal = value;
  }

  protected _popup?: PopupPageData;
  public get popup(): PopupPageData | undefined {
    return this._popup;
  }
  public set popup(value: PopupPageData | undefined) {
    this._popup = value;
  }

  public get hasChange(): boolean {
    return this.ChangingControl.controls.length > 0;
  }
  public updateHasChange = () => {
    // this.mainStateManager.Eventing.trigger('hasChangeOnTabs');
  };

  onClickCancelButton() { }
  onClickHelpButton() { }

  setHelpElementRef() { }

  selectThisPage = () => { };
  closeThisPage = () => {
    // this.mainStateManager.Modaling.closeThisPopup(this);
  };


  showModal = (component: JSX.Element) => {
    this.modal = new ModalPageData(this.mainStateManager, this);
    this.modal.component = component;
    // this.mainStateManager.Modaling.addModal(this.modal);
  };
  showModalPage = (pageKey: IArmisaPageKey | undefined, props: PropsOfPage, isMainOfStacks?: boolean) => {
    if (pageKey) {
      this.modal = new ModalPageData(this.mainStateManager, this);
      this.modal.pageKey = pageKey;
      this.modal.props = props;
      this.isMainOfStacks = isMainOfStacks;
      // this.mainStateManager.Modaling.addModalPage(this.modal);
    }
  };

  showPopup = (component: JSX.Element, mouseLocation?: MouseLocationProps | React.MouseEvent, location?: TLocationPopup) => {
    this.popup = new PopupPageData(this.mainStateManager, this, mouseLocation, location);
    this.popup.component = component;
    // this.mainStateManager.Modaling.addPopup(this.popup);
  };

  showPopupPage = (pageKey: IArmisaPageKey | undefined, props: PropsOfPage) => {
    if (pageKey) {
      this.popup = new PopupPageData(this.mainStateManager, this);
      this.popup.pageKey = pageKey;
      this.popup.props = props;
      // this.mainStateManager.Modaling.addPopupPage(this.popup);
    }
  };

  closeModal = () => {
    if (this._modal) {
      // this.mainStateManager.Modaling.closeThisModal(this._modal);
    }
  };

  closePopup = () => {
    if (this._popup) {
      // this.mainStateManager.Modaling.closeThisPopup(this._popup);
    }
  };
}