import _Drawer from "antd/es/drawer";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["width", "height"];
import React, { useState, useEffect, useRef } from "react";
import { PageStateService } from "../../utils/CLowCodeService/pageStateService";
import { PageStateFlag } from "lowcode/_utils/treeDataRelationFn/type";
import { LoadingService } from "../../utils/LoadingService";
import { getZoomStyle } from "../../utils/comfn/util";
import { CPageService } from "../../utils/CPageService";
import { PageCallbackType } from "../../utils/type";
var Drawer = function Drawer(props) {
  var _props$style, _props$style2;
  var _useState = useState(props.open || false),
    open = _useState[0],
    setOpen = _useState[1];
  var _useState2 = useState(props.style || {}),
    newStyle = _useState2[0],
    setNewStyle = _useState2[1];
  var _useState3 = useState(((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width) || 400),
    newWidth = _useState3[0],
    setNewWidth = _useState3[1];
  var _useState4 = useState(((_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.height) || 500),
    newHeight = _useState4[0],
    setNewHeight = _useState4[1];
  var _useState5 = useState(1),
    zoom = _useState5[0],
    setZoom = _useState5[1];
  var _useState6 = useState({}),
    rootStyle = _useState6[0],
    setRootStyle = _useState6[1];
  var customContainerRef = useRef(null);
  var pageStateService = new PageStateService(props.webGid);
  var cPageService = new CPageService();
  var loadingService = new LoadingService();
  cPageService.loadWebGid(props.webGid);
  useEffect(function () {
    if (props.__designMode !== "design") {
      window.addEventListener("resize", setRootZoom);
    } else {
      setOpen(true);
    }
    var container = document.querySelector(".lowcode-renderer-root");
    if (container) {
      customContainerRef.current = container;
      setRootStyle({
        position: 'absolute'
      });
    } else {
      customContainerRef.current = document.body;
      setRootStyle({});
    }
    return function () {
      window.removeEventListener("resize", setRootZoom);
    };
  }, []);
  useEffect(function () {
    if (props.style) {
      var _props$style3 = props.style,
        width = _props$style3.width,
        height = _props$style3.height,
        other = _objectWithoutPropertiesLoose(_props$style3, _excluded);
      setNewWidth(width);
      setNewHeight(height);
      setNewStyle(other);
    }
  }, [props.style]);
  useEffect(function () {
    if (props.__designMode !== "design") {
      setRootZoom();
      setOpen(props.open);

      // 弹框打开并且数据刷新并且嵌套渲染容器则发布
      if (props.open && props.refreshType === 'dataRefresh' && props.webGidList) {
        props.webGidList.forEach(function (webGid) {
          cPageService.publishPage(webGid, {
            type: PageCallbackType.refreshData
          });
        });
      }

      // 弹框打开，并且tg需要展示返回按钮
      if (props.open && props.backButton) {
        cPageService.handleDrawerInTelegram(props.name);
      }
    }
  }, [props.open]);
  var setRootZoom = function setRootZoom() {
    getZoomStyle(function (zoom) {
      setZoom(zoom);
    });
  };
  function onCancelFn() {
    setOpen(false);
    var newValue = {
      visible: false,
      params: {}
    };
    loadingService.recoverBodyOverflow();
    pageStateService.alterPageStateData(props.name, newValue, PageStateFlag.Modal);
  }
  return /*#__PURE__*/React.createElement(_Drawer, _extends({}, props, {
    style: _extends({}, newStyle, {
      zoom: zoom
    }, rootStyle),
    open: open,
    onClose: onCancelFn,
    width: newWidth,
    height: newHeight,
    getContainer: customContainerRef.current
  }));
};
export default Drawer;