import React from 'react';
import 'react-dom';
import { e as _extends } from '../_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 } from '../index-fc484d02.js';
import './withTooltip.js';
import '../index-155df85b.js';
import Text from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from '../ui/box.js';
import '../generic-7099c3ed.js';
import Button from '../ui/button.js';
import { u as useEnterKey } from '../useEnterKey-cb5bf7c9.js';

var modalWidth = "480px";
var zIndex = 999999999;
var ModalWrapper = styled(Box)({
  position: "fixed",
  top: "0",
  left: "0",
  width: "100vw",
  height: "100%",
  zIndex: zIndex + 10,
  overflow: "hidden",
  pointerEvents: "none"
});
var ModalOverlay = styled(Box)({
  position: "absolute",
  top: "0",
  left: "0",
  width: "100%",
  height: "100%",
  backgroundColor: "#000",
  opacity: "0",
  transition: "0.2s linear",
  pointerEvents: "auto",
  "&.modal-active": {
    opacity: "0.4 !important"
  }
});
var MoadlStyle = function MoadlStyle(props) {
  return {
    opacity: "0",
    position: "absolute",
    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)",
    transform: "translate3d(-50%, -45%, 0)",
    top: "50%",
    left: "50%",
    borderRadius: "5px",
    pointerEvents: "auto",
    "&.modal-active": {
      opacity: "1 !important",
      transform: "translate3d(-50%, -50%, 0) !important"
    },
    width: props.width,
    flexDirection: "column",
    alignItems: "center"
  };
};
var Modal = styled(Box)(MoadlStyle);
var IconBox = styled(Icon)({
  position: "absolute",
  top: "15px",
  right: "15px"
});
var ButtonStyle = function ButtonStyle(props) {
  return {
    margin: props.theme.space.sm,
    padding: "".concat(props.theme.space.md, "px ").concat(2 * props.theme.space.md, "px")
  };
};
var ButtonBox = styled(Button)(ButtonStyle);

var Dialog = function Dialog(_ref) {
  var active = _ref.active,
    onClose = _ref.onClose,
    onEnter = _ref.onEnter,
    title = _ref.title,
    subtitle = _ref.subtitle,
    primaryAction = _ref.primaryAction,
    primaryActionText = _ref.primaryActionText,
    primaryActionType = _ref.primaryActionType,
    secondaryAction = _ref.secondaryAction,
    secondaryActionText = _ref.secondaryActionText,
    secondaryActionType = _ref.secondaryActionType,
    children = _ref.children,
    dialogStyles = _ref.dialogStyles;
  var _useActivify = useActivify(active),
    enabled = _useActivify.enabled,
    visible = _useActivify.visible;
  var activeClassName = visible ? "modal-active" : "";
  useEscapeKey(onClose);
  useEnterKey(onEnter);
  if (!enabled) return null;

  /*
      we can only pass width & padding, any other style will be removed.
  */
  var width = dialogStyles.width,
    padding = dialogStyles.padding;
  var styles = {
    width: width,
    padding: padding
  };
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalWrapper, {
    "data-testid": "modal-wrapper"
  }, /*#__PURE__*/React.createElement(ModalOverlay, {
    "data-testid": "modal-overlay",
    className: activeClassName,
    onClick: onClose
  }), /*#__PURE__*/React.createElement(Modal, _extends({
    "data-testid": "modal",
    className: activeClassName
  }, styles), /*#__PURE__*/React.createElement(IconBox, {
    src: "closeV2",
    onClick: onClose
  }), title && /*#__PURE__*/React.createElement(Box, {
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Text, {
    "data-testid": "title",
    variant: "display-2.semi-bold",
    color: "black.haptik",
    textAlign: "center",
    lineHeight: "29px"
  }, title)), subtitle && /*#__PURE__*/React.createElement(Box, {
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Text, {
    "data-testid": "subtitle",
    variant: "body.lg",
    color: "black.haptik",
    textAlign: "center",
    lineHeight: "19px"
  }, subtitle)), children, /*#__PURE__*/React.createElement(Box, {
    justifyContent: "center"
  }, secondaryActionText && /*#__PURE__*/React.createElement(ButtonBox, {
    "data-testid": "secondary-action",
    themed: true,
    variant: secondaryActionType || "secondary",
    size: "regular",
    onClick: function onClick() {
      secondaryAction();
      onClose();
    }
  }, secondaryActionText), primaryActionText && /*#__PURE__*/React.createElement(ButtonBox, {
    "data-testid": "primary-action",
    themed: true,
    variant: primaryActionType || "primary",
    size: "regular",
    onClick: primaryAction
  }, primaryActionText)))));
};
Dialog.propTypes = {
  active: PropTypes.bool,
  onClose: PropTypes.func,
  onEnter: PropTypes.func,
  title: PropTypes.string,
  subtitle: PropTypes.string,
  primaryAction: PropTypes.func,
  primaryActionText: PropTypes.string,
  secondaryAction: PropTypes.func,
  secondaryActionText: PropTypes.string,
  children: PropTypes.node,
  dialogStyles: PropTypes.object,
  primaryActionType: PropTypes.string,
  secondaryActionType: PropTypes.string
};
Dialog.defaultProps = {
  active: false,
  onClose: function onClose() {},
  onEnter: function onEnter() {},
  title: "",
  subtitle: "",
  primaryAction: function primaryAction() {},
  primaryActionText: "Yes",
  secondaryAction: function secondaryAction() {},
  secondaryActionText: "No",
  children: null,
  dialogStyles: {
    padding: "50px",
    width: modalWidth
  },
  primaryActionType: "",
  secondaryActionType: ""
};
Dialog.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Dialog",
  "props": {
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onEnter": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "title": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "subtitle": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "primaryAction": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "primaryActionText": {
      "defaultValue": {
        "value": "\"Yes\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "secondaryAction": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "secondaryActionText": {
      "defaultValue": {
        "value": "\"No\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "dialogStyles": {
      "defaultValue": {
        "value": "{\n  padding: \"50px\",\n  width: modalWidth,\n}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "primaryActionType": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "secondaryActionType": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Dialog;
