"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sharedExpandStyles = exports.messages = exports.expandLayoutWrapperStyle = exports.ExpandLayoutWrapperWithRef = exports.ExpandIconWrapper = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("@atlaskit/theme/constants");
var _templateObject;
var _excluded = ["children"];
/** @jsx jsx */
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
  collapseNode: {
    id: 'fabric.editor.collapseNode',
    defaultMessage: 'Collapse content',
    description: 'Collapse the node'
  },
  expandDefaultTitle: {
    id: 'fabric.editor.expandDefaultTitle',
    defaultMessage: 'Click here to expand...',
    description: 'Placeholder text for an expand node'
  },
  expandNode: {
    id: 'fabric.editor.expandNode',
    defaultMessage: 'Expand content',
    description: 'Expand the node'
  },
  expandPlaceholderText: {
    id: 'fabric.editor.expandPlaceholder',
    defaultMessage: 'Give this expand a title...',
    description: 'Placeholder text for an expand node title input field'
  }
});
var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
var EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(_colors.B300, ")");
var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(_colors.N40A, ")");
var ExpandIconWrapper = exports.ExpandIconWrapper = function ExpandIconWrapper(_ref) {
  var children = _ref.children,
    expanded = _ref.expanded;
  return (0, _react2.jsx)("div", {
    css: function css() {
      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
    }
  }, children);
};
var expandIconWrapperStyle = function expandIconWrapperStyle() {
  return (0, _react2.css)({
    cursor: 'pointer',
    display: 'flex',
    color: "var(--ds-icon, ".concat(_colors.N90, ")"),
    borderRadius: "var(--ds-border-radius-100, 4px)",
    width: '24px',
    height: '24px',
    '&:hover': {
      background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
    },
    svg: {
      transition: "transform 0.2s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier)
    }
  });
};
var expandIconWrapperExpandedStyle = (0, _react2.css)({
  svg: {
    transform: 'rotate(90deg)'
  }
});
var expandLayoutWrapperStyle = exports.expandLayoutWrapperStyle = (0, _react2.css)({
  width: "var(--ds-space-300, 24px)",
  height: "var(--ds-space-300, 24px)"
});
var ExpandLayoutWrapperWithRef = exports.ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var children = props.children,
    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
  return (0, _react2.jsx)("div", (0, _extends2.default)({
    css: expandLayoutWrapperStyle
  }, rest, {
    ref: ref
  }), children);
});
var containerStyles = function containerStyles(styleProps) {
  var expanded = styleProps.expanded,
    focused = styleProps.focused;
  var marginTop = "var(--ds-space-050, 0.25rem)";
  var marginBottom = 0;
  // Only only these margins if the expand isn't editable
  // and is the root level expand.
  var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
  var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
  return function () {
    return (0, _react2.css)({
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR,
      borderRadius: BORDER_RADIUS,
      minHeight: '25px',
      background: !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND,
      margin: margin,
      transition: "background 0.3s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
      padding: "var(--ds-space-100, 8px)",
      '&:hover': {
        // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
        // This is because the default state already uses the same token and, as such, the hover style won't change anything.
        // https://product-fabric.atlassian.net/browse/DSP-4152
        border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N50A, ")")),
        background: EXPAND_SELECTED_BACKGROUND
      },
      'td > :not(style):first-child, td > style:first-child + *': {
        marginTop: 0
      }
    });
  };
};
var contentStyles = function contentStyles(styleProps) {
  return function () {
    return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
      (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '')
    );
  };
};
var titleInputStyles = function titleInputStyles() {
  return (0, _react2.css)({
    outline: 'none',
    border: 'none',
    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()),
    lineHeight: _editorSharedStyles.akEditorLineHeight,
    fontWeight: 'normal',
    color: "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"),
    background: 'transparent',
    display: 'flex',
    flex: 1,
    padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
    width: '100%',
    '&::placeholder': {
      opacity: 1,
      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
    }
  });
};
var titleContainerStyles = function titleContainerStyles() {
  return (0, _react2.css)({
    padding: 0,
    display: 'flex',
    alignItems: 'flex-start',
    background: 'none',
    border: 'none',
    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()),
    width: '100%',
    color: "var(--ds-text-subtle, ".concat(_colors.N300A, ")"),
    overflow: 'hidden',
    cursor: 'pointer',
    '&:focus': {
      outline: 0
    }
  });
};
var sharedExpandStyles = exports.sharedExpandStyles = {
  titleInputStyles: titleInputStyles,
  titleContainerStyles: titleContainerStyles,
  containerStyles: containerStyles,
  contentStyles: contentStyles
};