import React, { useEffect } from 'react';
import { Message, Overlay } from '@alicloudfe/components';
import './index.scss';
import { getMessage, getValidValues } from '@teamix/utils';

var FullScreen = function FullScreen(props) {
  var children = props.children,
      visible = props.visible,
      actionRef = props.actionRef;
  var _actionRef$current = actionRef.current,
      normalDataFilterForm = _actionRef$current.normalDataFilterForm,
      fullscreenDataFilterForm = _actionRef$current.fullscreenDataFilterForm,
      filterEnableRef = _actionRef$current.filterEnableRef;

  var closeByESC = function closeByESC(e) {
    if (visible && e.code === 'Escape') {
      var _actionRef$current2, _actionRef$current2$f;

      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.fullScreen) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2);
    }
  }; // 监听esc按钮


  useEffect(function () {
    window.addEventListener('keydown', closeByESC);
    return function () {
      window.removeEventListener('keydown', closeByESC);
    };
  }, [visible, actionRef]);

  var afterClose = function afterClose() {
    var _document;

    // 判断全屏前后筛选表单值是否有改变
    var n = JSON.stringify(getValidValues(normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.values));
    var f = JSON.stringify(getValidValues(fullscreenDataFilterForm === null || fullscreenDataFilterForm === void 0 ? void 0 : fullscreenDataFilterForm.values));

    if (n === f) {
      // 关闭全屏后，表单值未变化，开启普通表单onFilter
      filterEnableRef.current.normal = true;
    } else {
      // 关闭全屏后，表单值有变化，修改表单值
      normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.setValues(fullscreenDataFilterForm === null || fullscreenDataFilterForm === void 0 ? void 0 : fullscreenDataFilterForm.values);
    } // 关闭全屏后，关闭全屏表单onFilter


    filterEnableRef.current.fullscreen = false; // 移除类名

    if (document && ((_document = document) === null || _document === void 0 ? void 0 : _document.body)) {
      document.body.classList.remove('teamix-pro-table-fullscreen');
    }
  }; // 全屏开启之后


  var afterOpen = function afterOpen() {
    var _document2;

    // 判断全屏前后筛选表单值是否有改变
    var n = JSON.stringify(getValidValues(normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.values));
    var f = JSON.stringify(getValidValues(fullscreenDataFilterForm === null || fullscreenDataFilterForm === void 0 ? void 0 : fullscreenDataFilterForm.values));

    if (n === f) {
      // 全屏后，表单值未变化，开启全屏表单onFilter
      filterEnableRef.current.fullscreen = true;
    } else {
      // 全屏后，表单值变化，修改表单值
      fullscreenDataFilterForm === null || fullscreenDataFilterForm === void 0 ? void 0 : fullscreenDataFilterForm.setValues(normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.values);
    } // 全屏后，关闭普通表单onFilter


    filterEnableRef.current.normal = false; // 为 body 添加类名，用于判断是否全屏

    if (document && ((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.body)) {
      document.body.classList.add('teamix-pro-table-fullscreen');
    } // 消息提示


    Message.show({
      type: 'notice',
      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, getMessage('press')), /*#__PURE__*/React.createElement("span", {
        className: "teamix-pro-table-full-screen-message-esc"
      }, /*#__PURE__*/React.createElement("span", {
        className: "teamix-pro-table-full-screen-message-esc-title"
      }, "esc")), /*#__PURE__*/React.createElement("span", null, getMessage('toExitFullScreen'))),
      className: 'teamix-pro-table-full-screen-message'
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, children(false), /*#__PURE__*/React.createElement(Overlay, {
    canCloseByOutSideClick: false,
    align: "cc cc",
    cache: true,
    v2: false,
    disableScroll: true,
    shouldUpdatePosition: true,
    afterClose: afterClose,
    afterOpen: afterOpen,
    animation: {
      in: 'fadeIn',
      out: 'fadeOut'
    },
    visible: visible,
    wrapperStyle: {
      zIndex: 999
    },
    onRequestClose: function onRequestClose() {
      var _actionRef$current3, _actionRef$current3$f;

      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$f = _actionRef$current3.fullScreen) === null || _actionRef$current3$f === void 0 ? void 0 : _actionRef$current3$f.call(_actionRef$current3);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "teamix-pro-table-full-screen"
  }, children(true))));
};

export default FullScreen;