import React from 'react';
import 'react-dom';
import { a as _objectSpread2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { P as Portal } from '../index-930c2100.js';
import useActivify from '../hooks/useActivify.js';
import './tooltip.js';
import '../key_codes-a5a2b85e.js';
import { u as useEscapeKey } from '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import { C as CloseIcon } from '../close-cd95ea58.js';
import { C as CloseV2Icon } from '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import { A as ArrowIcon, C as CloneIcon } from '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import './withTooltip.js';
import '../index-91504e81.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-2d73c3aa.js';
import Button from '../ui/button.js';

var headerStyle = function headerStyle(props) {
  return {
    justifyContent: "space-between",
    alignItems: "center",
    padding: props.theme.space.lg,
    borderBottom: "1px solid ".concat(props.theme.colors.grey.haptik)
  };
};

var iconStyle = function iconStyle(props) {
  return {
    transform: "rotate(180deg)",
    marginRight: props.theme.space.lg
  };
};

var BackIcon = styled(Icon)(iconStyle);
var ThemedDrawerHeader = styled(Box)(headerStyle);

var css = ".DrawerHeader_drawerHeader__1o6G2 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  border-bottom: 1px solid #eee; }\n\n.DrawerHeader_leftColumn__1x490,\n.DrawerHeader_rightColumn__3_Q2f {\n  display: flex;\n  align-items: center; }\n\n.DrawerHeader_icon__3tdAI {\n  margin-right: 8px;\n  cursor: pointer;\n  opacity: 0.7; }\n  .DrawerHeader_icon__3tdAI:hover {\n    opacity: 1; }\n\n.DrawerHeader_doneButton__1_U4P {\n  margin-right: 12px; }\n\n.DrawerHeader_saveButton__3s8Qp {\n  cursor: pointer;\n  padding: 6px 12px;\n  background-color: #124fa0;\n  color: #fff;\n  font-size: 14px;\n  border-radius: 5px;\n  font-weight: 400;\n  margin-left: 8px;\n  animation-delay: 0.2s;\n  animation: DrawerHeader_popin__2bMLr 0.3s ease-out;\n  animation-fill-mode: both; }\n\n.DrawerHeader_saveButtonDisabled__jJ6o_ {\n  cursor: pointer;\n  padding: 6px 12px;\n  background-color: #999;\n  color: #fff;\n  font-size: 14px;\n  border-radius: 5px;\n  font-weight: 400;\n  margin-left: 8px;\n  opacity: 0.4; }\n  .DrawerHeader_saveButtonDisabled__jJ6o_:hover {\n    background-color: #0d3872; }\n\n.DrawerHeader_copyButton__271qO {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  color: #000;\n  font-size: 14px;\n  border-radius: 5px;\n  font-weight: 400;\n  transition: 0.2s ease-out;\n  padding: 4px 0; }\n  .DrawerHeader_copyButton__271qO:after {\n    content: 'COPY JSON ';\n    font-size: 12px;\n    padding-left: 0px;\n    padding-right: 12px;\n    white-space: nowrap;\n    position: relative;\n    width: 0;\n    transition: 0.3s ease-out;\n    opacity: 0; }\n  .DrawerHeader_copyButton__271qO:hover {\n    background-color: #eee; }\n    .DrawerHeader_copyButton__271qO:hover:after {\n      opacity: 1;\n      width: 80px; }\n\n@keyframes DrawerHeader_popin__2bMLr {\n  0% {\n    background-color: #999; }\n  100% {\n    background-color: #124fa0; } }\n";
var styles = {"drawerHeader":"DrawerHeader_drawerHeader__1o6G2","leftColumn":"DrawerHeader_leftColumn__1x490","rightColumn":"DrawerHeader_rightColumn__3_Q2f","icon":"DrawerHeader_icon__3tdAI","doneButton":"DrawerHeader_doneButton__1_U4P","saveButton":"DrawerHeader_saveButton__3s8Qp","popin":"DrawerHeader_popin__2bMLr","saveButtonDisabled":"DrawerHeader_saveButtonDisabled__jJ6o_","copyButton":"DrawerHeader_copyButton__271qO"};
styleInject(css);

var ComponentDrawerHeader = function ComponentDrawerHeader(props) {
  var children = props.children,
      onClose = props.onClose,
      onBackButtonClick = props.onBackButtonClick,
      onSave = props.onSave,
      onCopy = props.onCopy,
      onDone = props.onDone,
      themed = props.themed;

  if (themed) {
    var drawerHeaderProps = _objectSpread2({}, props, {
      "data-testid": "themedDrawerHeader"
    });

    return React.createElement(ThemedDrawerHeader, drawerHeaderProps, React.createElement(Box, {
      alignItems: "center",
      padding: "0"
    }, onBackButtonClick ? React.createElement(BackIcon, {
      onClick: onBackButtonClick,
      src: ArrowIcon
    }) : null, React.createElement(Text, {
      variant: "h3.semi-bold"
    }, props.children)), React.createElement(Icon, {
      onClick: onClose,
      src: CloseV2Icon
    }));
  }

  return React.createElement("div", {
    className: styles.drawerHeader
  }, React.createElement("div", {
    className: styles.leftColumn
  }, onClose ? React.createElement(Icon, {
    onClick: onClose,
    className: styles.icon,
    src: CloseIcon
  }) : null, onDone ? React.createElement(Button, {
    onClick: onDone,
    className: styles.doneButton
  }, "Done") : null, children), React.createElement("div", {
    className: styles.rightColumn
  }, onCopy ? React.createElement(Icon, {
    onClick: onCopy,
    className: styles.copyButton,
    src: CloneIcon
  }) : null, onSave ? React.createElement("div", {
    onClick: onSave,
    className: styles.saveButton
  }, "Save") : null));
};

ComponentDrawerHeader.propTypes = {
  children: PropTypes.string,
  onBackButtonClick: PropTypes.func,
  onClose: PropTypes.func,
  onSave: PropTypes.func,
  onCopy: PropTypes.func,
  onDone: PropTypes.func,
  themed: PropTypes.bool
};
ComponentDrawerHeader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComponentDrawerHeader",
  "props": {
    "children": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onBackButtonClick": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onClose": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onSave": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onCopy": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onDone": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

var bodyStyle = function bodyStyle() {
  return {
    flexDirection: "column"
  };
};

var ThemedDrawerBody = styled(Box)(bodyStyle);

var css$1 = ".Drawer_drawerWrapper__2PXad {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999999999;\n  pointer-events: none; }\n  .Drawer_drawerWrapper__2PXad * {\n    -webkit-font-smoothing: antialiased; }\n\n.Drawer_drawerOverlay__x3BUj {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  opacity: 0;\n  transition: 0.2s linear;\n  pointer-events: auto; }\n  .Drawer_drawerOverlay__x3BUj.Drawer_drawerActive__2N-mZ {\n    opacity: 0.8 !important; }\n\n.Drawer_drawer__34eUq {\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  width: 360px;\n  background-color: #fff;\n  outline: none;\n  box-sizing: border-box;\n  transition: transform 0.5s cubic-bezier(0.175, 0.5, 0.12, 1), opacity 0.5s cubic-bezier(0.175, 0.5, 0.12, 1), width 0.2s cubic-bezier(0, 0, 0.58, 1);\n  transform: translate3d(360px, 0, 0);\n  pointer-events: auto; }\n  .Drawer_drawer__34eUq * {\n    font-family: \"Roboto\", sans-serif; }\n  .Drawer_drawer__34eUq.Drawer_drawerActive__2N-mZ {\n    opacity: 1 !important;\n    transform: translate3d(0, 0, 0) !important;\n    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); }\n  .Drawer_drawer__34eUq.Drawer_noDisable__kjmIa {\n    opacity: 1 !important; }\n  .Drawer_drawer__34eUq.Drawer_left__Fihg0 {\n    right: auto;\n    left: 0;\n    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n    transform: translate3d(-360px, 0, 0); }\n";
var styles$1 = {"drawerWrapper":"Drawer_drawerWrapper__2PXad","drawerOverlay":"Drawer_drawerOverlay__x3BUj","drawerActive":"Drawer_drawerActive__2N-mZ","drawer":"Drawer_drawer__34eUq","noDisable":"Drawer_noDisable__kjmIa","left":"Drawer_left__Fihg0"};
styleInject(css$1);

var Drawer = function Drawer(_ref) {
  var children = _ref.children,
      prefixClassName = _ref.prefixClassName,
      className = _ref.className,
      active = _ref.active,
      position = _ref.position,
      offset = _ref.offset,
      attachTo = _ref.attachTo,
      width = _ref.width,
      zIndex = _ref.zIndex,
      noDisable = _ref.noDisable,
      onClose = _ref.onClose,
      noOverlay = _ref.noOverlay;

  var _useActivify = useActivify(active),
      enabled = _useActivify.enabled,
      visible = _useActivify.visible;

  var activeClassName = visible ? styles$1.drawerActive : "";
  var placementClassName = position === "LEFT" ? styles$1.left : "";
  var noDisableClassName = noDisable ? styles$1.noDisable : "";
  var transformAmount = position === "LEFT" ? -1 * (width + offset) : width + offset;
  var style = {};
  style.zIndex = zIndex;
  style.left = position === "LEFT" ? offset : "auto";
  style.right = position === "LEFT" ? "auto" : offset;
  useEscapeKey(onClose);
  if (!enabled && !noDisable) return null;
  return React.createElement(Portal, {
    node: document && attachTo && document.getElementById(attachTo)
  }, React.createElement("div", {
    className: "".concat(styles$1.drawerWrapper, " ").concat(prefixClassName, " ").concat(className),
    style: style,
    "data-testid": "drawer"
  }, noOverlay ? null : React.createElement("div", {
    className: "\n                    ".concat(styles$1.drawerOverlay, "\n                    ").concat(activeClassName, "\n                    ").concat(prefixClassName, "-overlay\n                  "),
    onClick: onClose
  }), React.createElement("div", {
    style: {
      width: width,
      transform: "translate3d(".concat(transformAmount, "px, 0, 0)")
    },
    className: "\n              ".concat(styles$1.drawer, "\n              ").concat(placementClassName, "\n              ").concat(activeClassName, "\n              ").concat(noDisableClassName, "\n              ").concat(prefixClassName, "-drawer\n            ")
  }, children)));
};

Drawer.Header = ComponentDrawerHeader;
Drawer.Body = ThemedDrawerBody;
Drawer.propTypes = {
  /** Children Nodes Passed down to the Drawer */
  children: PropTypes.node,

  /** onClose Callback */
  onClose: PropTypes.func,

  /** Active state for the Drawer */
  active: PropTypes.bool,

  /** Handles the functionality of making a drawer permanently enabled */
  noDisable: PropTypes.bool,

  /** Z-Index for the defining stack order of the Drawer */
  zIndex: PropTypes.number,

  /** Off Set for the drawer */
  offset: PropTypes.number,

  /** Prefixed CSS Classname passed to the Drawer */
  prefixClassName: PropTypes.string,

  /** CSS Classname passed to the Drawer */
  className: PropTypes.string,

  /** Positioning of the Drawer on the Webpage */
  position: PropTypes.string,

  /** Enables/Disables overlaying of the Drawer */
  noOverlay: PropTypes.bool,

  /** Width for the Drawer Element */
  width: PropTypes.number,

  /** The DOM Node to attach the Drawer to */
  attachTo: PropTypes.node
};
Drawer.defaultProps = {
  onClose: function onClose() {},
  active: false,
  noDisable: false,
  zIndex: 2,
  offset: 0,
  className: "",
  position: "RIGHT",
  noOverlay: false,
  width: "360px",
  attachTo: null
};
Drawer.classNames = {
  $prefix: "Applied to the Drawer Wrapper",
  "$prefix-overlay": "Applied to the Overlay for Drawer",
  "$prefix-drawer": "Applied to the Drawer Node"
};
Drawer.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Drawer",
  "props": {
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onClose Callback"
    },
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Active state for the Drawer"
    },
    "noDisable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Handles the functionality of making a drawer permanently enabled"
    },
    "zIndex": {
      "defaultValue": {
        "value": "2",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Z-Index for the defining stack order of the Drawer"
    },
    "offset": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Off Set for the drawer"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "CSS Classname passed to the Drawer"
    },
    "position": {
      "defaultValue": {
        "value": "\"RIGHT\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Positioning of the Drawer on the Webpage"
    },
    "noOverlay": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Enables/Disables overlaying of the Drawer"
    },
    "width": {
      "defaultValue": {
        "value": "\"360px\"",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Width for the Drawer Element"
    },
    "attachTo": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "The DOM Node to attach the Drawer to"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Children Nodes Passed down to the Drawer"
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Prefixed CSS Classname passed to the Drawer"
    }
  }
};

export default Drawer;
