import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { P as Portal } from '../key_codes-ff72266d.js';
import useActivify from '../hooks/useActivify.js';
import { u as useEscapeKey } from '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import '../style-inject.es-1f59c1d0.js';
import { I as Icon, g as CloseV2Icon } from '../index-fc484d02.js';
import './withTooltip.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { u as useEnterKey } from '../useEnterKey-cb5bf7c9.js';
import { a as ThemedModalOverlay, B as BodyWrapper, F as FooterWrapper } from '../ThemedModal-adf27152.js';

var HeaderWrapper = styled("div")(function (props) {
  return {
    display: "flex",
    borderBottom: "".concat(props.theme.borderWidths.xs, "px solid ").concat(props.theme.colors.grey.haptik),
    // Extra padding on right for the close icon
    padding: "8px 40px 8px 16px",
    fontFamily: "Proxima Nova"
  };
});
var XDKModalWrapper = styled("div")(function (props) {
  return {
    fontFamily: "Proxima Nova",
    position: "fixed",
    top: 0,
    left: 0,
    width: "100vw",
    height: "100%",
    zIndex: 1000000009,
    overflow: "hidden",
    pointerEvents: "none",
    display: "flex",
    alignItems: props.fullScreen ? "initial" : "center",
    justifyContent: "flex-start",
    padding: props.fullScreen ? "0px" : "0px 8px",
    marginTop: props.fullScreen ? "65px" : "0px"
  };
});
var XDKModal = styled("div")(function (props) {
  return {
    display: "flex",
    opacity: props.active ? "1" : "0",
    flexDirection: "column",
    position: "absolute",
    padding: 0,
    zIndex: 2,
    backgroundColor: props.theme.colors.grey.pastel,
    outline: "none",
    boxShadow: "0px 5px 25px rgba(0, 0, 0, 0.15)",
    boxSizing: "border-box",
    transition: "0.5s cubic-bezier(0.175, 0.5, 0.12, 1)",
    maxWidth: 1200,
    maxHeight: 648,
    borderRadius: props.theme.radii.sm,
    pointerEvents: "auto",
    fontFamily: "Proxima Nova",
    minWidth: props.fullScreen ? "97%" : "90%",
    height: props.fullScreen ? "100%" : props.height,
    justifyContent: "initial",
    // For smaller screens, have to adjust max-height and max-width
    "@media (max-width: 1400px)": {
      maxWidth: "80vw"
    }
  };
});
var IconWrapper = styled("div")({
  position: "absolute",
  top: 12,
  right: 12,
  padding: 0
});
var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var onClose = props.onClose,
    onEnter = props.onEnter,
    children = props.children,
    noOverlay = props.noOverlay,
    active = props.active,
    header = props.header,
    footer = props.footer,
    style = props.style,
    _props$portalNode$cur = props.portalNode.current,
    portalNode = _props$portalNode$cur === void 0 ? null : _props$portalNode$cur,
    fullScreen = props.fullScreen;
  var _useActivify = useActivify(active),
    enabled = _useActivify.enabled,
    visible = _useActivify.visible;
  useEscapeKey(onClose);
  useEnterKey(onEnter);
  if (!enabled) return null;
  return /*#__PURE__*/React.createElement(Portal, {
    node: portalNode
  }, /*#__PURE__*/React.createElement(XDKModalWrapper, {
    "data-testid": "xdk-modal",
    fullScreen: fullScreen
  }, !noOverlay && /*#__PURE__*/React.createElement(ThemedModalOverlay, {
    active: visible,
    onClick: onClose
  }), /*#__PURE__*/React.createElement(XDKModal, {
    active: visible,
    ref: ref,
    fullScreen: fullScreen
  }, header && /*#__PURE__*/React.createElement(HeaderWrapper, {
    "data-testid": "modal-header"
  }, header), /*#__PURE__*/React.createElement(BodyWrapper, {
    "data-testid": "modal-body",
    isHeader: header,
    isFooter: footer,
    style: style
  }, children), footer && /*#__PURE__*/React.createElement(FooterWrapper, {
    "data-testid": "modal-footer"
  }, footer), /*#__PURE__*/React.createElement(IconWrapper, {
    "data-testid": "close-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    src: CloseV2Icon,
    onClick: onClose
  })))));
});
Modal.propTypes = {
  /** The content you want to render inside the modal */
  children: PropTypes.node,
  /** When the modal closes, this is the callback function called */
  onClose: PropTypes.func,
  /** When the enter button is pressed, this function is called */
  onEnter: PropTypes.func,
  /** Whether the modal is visible or not */
  active: PropTypes.bool,
  /** If true, doesnt render the overlay (transparent) */
  noOverlay: PropTypes.bool,
  /** Header for Themed Modal */
  header: PropTypes.node,
  /** Footer for Themed Modal */
  footer: PropTypes.node,
  /** Style Prop */
  style: PropTypes.object,
  /** Ref to be assigned to Modal */
  ref: PropTypes.any,
  /** if Modal needs to be loaded to a particular element */
  portalNode: PropTypes.node,
  /** if Modal needs to be loaded on fullscreen */
  fullScreen: PropTypes.bool
};
Modal.defaultProps = {
  onClose: function onClose() {},
  onEnter: function onEnter() {},
  active: false,
  noOverlay: false,
  style: {},
  ref: null,
  portalNode: {
    current: null
  },
  fullScreen: false
};
Modal.__docgenInfo = {
  "description": "",
  "methods": [],
  "props": {
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When the modal closes, this is the callback function called"
    },
    "onEnter": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When the enter button is pressed, this function is called"
    },
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the modal is visible or not"
    },
    "noOverlay": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If true, doesnt render the overlay (transparent)"
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Style Prop"
    },
    "ref": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "any"
      },
      "required": false,
      "description": "Ref to be assigned to Modal"
    },
    "portalNode": {
      "defaultValue": {
        "value": "{\n  current: null,\n}",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "if Modal needs to be loaded to a particular element"
    },
    "fullScreen": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "if Modal needs to be loaded on fullscreen"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "The content you want to render inside the modal"
    },
    "header": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Header for Themed Modal"
    },
    "footer": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Footer for Themed Modal"
    }
  }
};

export default Modal;
