var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
import { getDeviceType } from '../../../../utils/ui';
import { DeviceType } from '../../../../types/ui.type';
/**
 * Modal mobile controller
 */
export class VegaModalMobileController extends VegaSlimmer {
  /* istanbul ignore next */
  /**
   * Component lifecycle - [connectedCallback]
   */
  componentDidLoad() {
    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
      this.disableBackdropTouchMove();
    }
  }
  /* istanbul ignore next */
  /**
   * There are two situations in modal scrolling:
   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
   * 2. Scrolls the modal content (if scrollable) in vega-modal.
   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
   *
   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
   * This problem is reproduced on the following websites, and there is no solution yet.
   * https://v5.bootcss.com/docs/components/modal/
   * https://mui.com/material-ui/react-dialog/
   */
  disableBackdropTouchMove() {
    this.host.addEventListener('touchstart', (e) => {
      this.touchStartY = e.targetTouches[0].pageY;
    }, { capture: true });
    this.host.addEventListener('touchmove', (e) => {
      const isScrolledTop = this.host.scrollTop <= 0;
      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
      if (e.target === this.host &&
        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
        e.preventDefault();
      }
    }, { capture: true });
  }
}
__decorate([
  MapToComponentField()
], VegaModalMobileController.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaModalMobileController.prototype, "backdrop", void 0);
__decorate([
  MapToComponentMethod('componentDidLoad')
], VegaModalMobileController.prototype, "componentDidLoad", null);
