import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useMemo, useReducer } from 'react';
import PropTypes from 'prop-types';
import { valueMirror } from 'ramda-extension';
import Flex from '../Flex';
import PortalToRoot from './PortalToRoot';
import Backdrop from './Backdrop';
import { ModalApiContext } from './contexts';
var initialState = {
  modalProps: null,
  component: null,
  isOpened: false
};
var ActionTypes = valueMirror(['OPEN_MODAL', 'CLOSE_MODAL']);

var reducer = function reducer(state, action) {
  switch (action.type) {
    case ActionTypes.OPEN_MODAL:
      {
        var _action$payload = action.payload,
            component = _action$payload.component,
            modalProps = _action$payload.modalProps;
        return {
          component: component,
          modalProps: modalProps,
          isOpened: true
        };
      }

    case ActionTypes.CLOSE_MODAL:
      {
        return {
          component: null,
          modalProps: null,
          isOpened: false
        };
      }
  }

  return state;
};

var actions = {
  openModal: function openModal(payload) {
    return {
      type: ActionTypes.OPEN_MODAL,
      payload: payload
    };
  },
  closeModal: function closeModal(payload) {
    return {
      type: ActionTypes.CLOSE_MODAL,
      payload: payload
    };
  }
};

var toggleBodyClassname = function toggleBodyClassname(className, toggler) {
  if (typeof window === 'undefined') {
    return;
  }

  var classList = document.body.classList;
  return toggler ? classList.add(className) : classList.remove(className);
};

export var ModalProvider = function ModalProvider(_ref) {
  var children = _ref.children,
      _ref$bodyModalClassna = _ref.bodyModalClassname,
      bodyModalClassname = _ref$bodyModalClassna === void 0 ? 'modal' : _ref$bodyModalClassna;

  var _useReducer = useReducer(reducer, initialState),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      _useReducer2$ = _useReducer2[0],
      isOpened = _useReducer2$.isOpened,
      modalProps = _useReducer2$.modalProps,
      ModalComponent = _useReducer2$.component,
      dispatch = _useReducer2[1];

  var api = useMemo(function () {
    return {
      openModal: function openModal(component, modalProps) {
        dispatch(actions.openModal({
          component: component,
          modalProps: modalProps
        }));
        toggleBodyClassname("".concat(bodyModalClassname, "--opened"), true);
      },
      closeModal: function closeModal(component) {
        dispatch(actions.closeModal({
          component: component
        }));
        toggleBodyClassname("".concat(bodyModalClassname, "--opened"), false);
      }
    };
  }, [bodyModalClassname]);
  return /*#__PURE__*/React.createElement(ModalApiContext.Provider, {
    value: api
  }, children, isOpened && ModalComponent && /*#__PURE__*/React.createElement(PortalToRoot, null, /*#__PURE__*/React.createElement(Backdrop, {
    onClick: function onClick() {
      return api.closeModal(ModalComponent);
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
    sx: {
      zIndex: 1001,
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      p: [0, 4]
    }
  }, /*#__PURE__*/React.createElement(ModalComponent, _extends({}, modalProps, api)))));
};
process.env.NODE_ENV !== "production" ? ModalProvider.propTypes = {
  bodyModalClassname: PropTypes.string,
  children: PropTypes.node
} : void 0;
export default ModalProvider;