"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EditToggle = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
var _primitives = require("@atlaskit/primitives");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss

var buttonContainerStyles = (0, _react2.css)({
  opacity: 0,
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1,
  position: 'absolute',
  width: 'max-content',
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
  top: '-28px',
  display: 'inline-flex',
  justifyContent: 'flex-end',
  color: "var(--ds-text-subtle, #505258)"
});
var buttonStyles = (0, _react2.css)({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
  minHeight: "var(--ds-space-300, 24px)",
  borderRadius: "var(--ds-radius-small, 4px)",
  paddingLeft: "var(--ds-space-150, 12px)",
  paddingRight: "var(--ds-space-150, 12px)",
  font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  '&:hover': {
    backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
  },
  outlineColor: "var(--ds-border-focused, #4688EC)",
  border: 'none',
  backgroundColor: "var(--ds-background-input, #FFFFFF)",
  color: "var(--ds-text-subtle, #505258)"
});
var showButtonContainerStyle = (0, _react2.css)({
  opacity: 1
});
var iconStyles = (0, _primitives.xcss)({
  marginRight: 'space.075'
});
var i18n = (0, _reactIntlNext.defineMessages)({
  doneEditing: {
    id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
    defaultMessage: 'Done editing',
    description: 'Text in button when on click switches back to view mode of a macro'
  },
  makeEdits: {
    id: 'editor-common-extensibility-extension-lozenge-editToggle.make.edits',
    defaultMessage: 'Make edits',
    description: 'Text in button when on click switches back to edit mode of a macro'
  }
});
// Used to toggle between edit and renderer mode for bodied macros in live pages
var EditToggle = exports.EditToggle = function EditToggle(_ref) {
  var isNodeHovered = _ref.isNodeHovered,
    customContainerStyles = _ref.customContainerStyles,
    setIsNodeHovered = _ref.setIsNodeHovered,
    showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
    setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView;
  var intl = (0, _reactIntlNext.useIntl)();
  var text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
  var icon = showBodiedExtensionRendererView ? (0, _react2.jsx)(_edit.default, {
    testId: "edit-icon",
    label: ""
  }) : (0, _react2.jsx)(_checkMark.default, {
    testId: "check-mark-icon",
    label: ""
  });
  var handleClick = (0, _react.useCallback)(function () {
    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
  var handleKeyDown = (0, _react.useCallback)(function (event) {
    if (event.key === 'Enter') {
      handleClick();
    }
  }, [handleClick]);
  return (0, _react2.jsx)("div", {
    "data-testid": "extension-edit-toggle-container"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    css: [buttonContainerStyles, (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? null : isNodeHovered && showButtonContainerStyle]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: customContainerStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: "extension-edit-toggle-container"
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseOver: function onMouseOver() {
      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
    }
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseLeave: function onMouseLeave() {
      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
    },
    tabIndex: -1
  }, (0, _react2.jsx)("button", {
    type: "button",
    "data-testid": "edit-toggle"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    css: buttonStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: "extension-edit-toggle",
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    onFocus: function onFocus() {
      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
    },
    onBlur: function onBlur() {
      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
    }
  }, (0, _react2.jsx)(_primitives.Flex, {
    as: "span",
    xcss: iconStyles
  }, icon), text));
};