import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _templateObject;
var _excluded = ["children"];
/** @jsx jsx */

import React, { forwardRef } from 'react';
import { css, jsx } from '@emotion/react';
import { defineMessages } from 'react-intl-next';
import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
import { fontSize } from '@atlaskit/theme/constants';
export var messages = 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(B300, ")");
var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(N40A, ")");
export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
  var children = _ref.children,
    expanded = _ref.expanded;
  return jsx("div", {
    css: function css() {
      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
    }
  }, children);
};
var expandIconWrapperStyle = function expandIconWrapperStyle() {
  return css({
    cursor: 'pointer',
    display: 'flex',
    color: "var(--ds-icon, ".concat(N90, ")"),
    borderRadius: "var(--ds-border-radius-100, 4px)",
    width: '24px',
    height: '24px',
    '&:hover': {
      background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
    },
    svg: {
      transition: "transform 0.2s ".concat(akEditorSwoopCubicBezier)
    }
  });
};
var expandIconWrapperExpandedStyle = css({
  svg: {
    transform: 'rotate(90deg)'
  }
});
export var expandLayoutWrapperStyle = css({
  width: "var(--ds-space-300, 24px)",
  height: "var(--ds-space-300, 24px)"
});
export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
  var children = props.children,
    rest = _objectWithoutProperties(props, _excluded);
  return jsx("div", _extends({
    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(akLayoutGutterOffset, "px") : 0;
  var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
  return function () {
    return 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(akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(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(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
      css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 css({
    outline: 'none',
    border: 'none',
    fontSize: relativeFontSizeToBase16(fontSize()),
    lineHeight: akEditorLineHeight,
    fontWeight: 'normal',
    color: "var(--ds-text-subtlest, ".concat(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(N200, ")")
    }
  });
};
var titleContainerStyles = function titleContainerStyles() {
  return css({
    padding: 0,
    display: 'flex',
    alignItems: 'flex-start',
    background: 'none',
    border: 'none',
    fontSize: relativeFontSizeToBase16(fontSize()),
    width: '100%',
    color: "var(--ds-text-subtle, ".concat(N300A, ")"),
    overflow: 'hidden',
    cursor: 'pointer',
    '&:focus': {
      outline: 0
    }
  });
};
export var sharedExpandStyles = {
  titleInputStyles: titleInputStyles,
  titleContainerStyles: titleContainerStyles,
  containerStyles: containerStyles,
  contentStyles: contentStyles
};