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 { PopupPageData, MouseLocationProps, TLocationPopup } from './ModalPopup';

export class ModalPageData extends BasePageData {
  public widthPecent?: number | string = undefined;
  public heightPecent?: number | string = undefined;
  public isInitializeOpicity?: boolean = undefined;
  public backdropDivElement: HTMLDivElement;
  public mainDivElement: HTMLDivElement;

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

  constructor(maniStateManage: MainStateManager, public parent: BasePageData, closeFunction?: () => void) {
    super(maniStateManage);
    this.parent.modal = this;

    this.backdropDivElement = document.createElement('div');
    this.backdropDivElement.classList.add('backdrop-main-show');
    // this.backdropDivElement.style.zIndex = `${4000 + this.mainStateManager.Modaling.modals.length      }`;
    this.backdropDivElement.style.opacity = '0';

    this.mainDivElement = document.createElement('div');
    this.mainDivElement.classList.add('modal-main-show');
    // this.mainDivElement.style.zIndex = `${4000 + this.mainStateManager.Modaling.modals.length      }`;


    this.backdropDivElement.onclick = closeFunction || 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 UpdateWidthAndHeightSize() {
    if (this.widthPecent) {
      if (typeof this.widthPecent === 'number' && this.widthPecent > 10) {
        this.mainDivElement.style.width = `${this.widthPecent}%`;
      } else if (typeof this.widthPecent === 'string' && this.widthPecent !== '') {
        this.mainDivElement.style.width = this.widthPecent;
      }
    }

    if (this.heightPecent) {
      if (typeof this.heightPecent === 'number' && this.heightPecent > 10) {
        this.mainDivElement.style.height = `${this.heightPecent}%`;
      } else if (typeof this.heightPecent === 'string' && this.heightPecent !== '') {
        this.mainDivElement.style.height = this.heightPecent;
      }
    }
  }

  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.closeThisModal(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 | any, location?: TLocationPopup, byArrow?: boolean) => {
    this.popup = new PopupPageData(this.mainStateManager, this, mouseLocation, location, byArrow);
    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);
    }
  };
}