import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _templateObject;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
import { css } from '@emotion/react';
import { PanelType } from '@atlaskit/adf-schema';
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
import { emojiImage, emojiSprite } from '@atlaskit/emoji';
import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
var lightPanelColors = {
  info: B50,
  note: P50,
  tip: G50,
  success: G50,
  warning: Y50,
  error: R50
};
export var darkPanelColors = {
  // standard panels
  info: "#0C294F",
  error: "#441C13",
  warning: "#413001",
  tip: "#052E21",
  success: "#052E21",
  note: "#282249",
  // Reds
  R900: '#601D16',
  // Red Saturated
  R100S: "#FFEFEB",
  R300S: "#FFB5A3",
  R500S: "#FF6B47",
  R800S: "#C4320E",
  R1200S: "#441C13",
  // Yellows
  Y900: '#533F04',
  // Yellow Saturated
  Y100S: "#FFF3D1",
  Y300S: "#FFDC7A",
  Y500S: "#FFC933",
  Y800S: "#D8A003",
  Y1200S: "#413001",
  // Greens
  G900: '#164B35',
  // Green Saturated
  G100S: "#E3FCF0",
  G300S: "#95EEC5",
  G400S: "#60DCA8",
  G900S: "#086848",
  G1200S: "#052E21",
  // Blues
  B900: '#09326C',
  // Saturated Blues
  B100S: '#E5F0FF',
  B300S: '#A3C9FF',
  B500S: '#4794FF',
  B800S: '#0055CC',
  B1200S: '#0C294F',
  // Purples
  P900: "#352C63",
  // Purple Saturated
  P100S: "#EEEBFF",
  P300S: "#CCC3FE",
  P500S: "#A292F7",
  P800S: "#5E49CA",
  P1200S: "#282249",
  // Teals
  T900: '#1D474C',
  // Teal Saturated
  T100S: "#DBFAFF",
  T300S: "#78EBFC",
  T400S: "#3AD6EE",
  T900S: "#056270",
  T1200S: "#0B3037",
  // Dark Mode Alpha
  DarkGray: '#161A1D',
  Gray: '#2C333A',
  LightGray: '#5A6977',
  TextColor: '#D9DDE3'
};
var lightIconColor = {
  info: "var(--ds-icon-information, ".concat(B400, ")"),
  note: "var(--ds-icon-discovery, ".concat(P400, ")"),
  tip: "var(--ds-icon-success, ".concat(G400, ")"),
  success: "var(--ds-icon-success, ".concat(G400, ")"),
  warning: "var(--ds-icon-warning, ".concat(Y400, ")"),
  error: "var(--ds-icon-danger, ".concat(R400, ")")
};

// New custom icons are a little smaller than predefined icons.
// To fix alignment issues with custom icons, vertical alignment is updated.
var panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;

// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
var panelDarkModeColors = [[B50, darkPanelColors.B1200S], [B75, darkPanelColors.B900], [B100, darkPanelColors.B800S], [N0, darkPanelColors.LightGray], [N20, darkPanelColors.Gray], [N60, darkPanelColors.DarkGray], [T50, darkPanelColors.T1200S], [T75, darkPanelColors.T900], [T100, darkPanelColors.T900S], [G50, darkPanelColors.G1200S], [G75, darkPanelColors.G900], [G200, darkPanelColors.G900S], [Y50, darkPanelColors.Y1200S], [Y75, darkPanelColors.Y900], [Y200, darkPanelColors.Y800S], [R50, darkPanelColors.R1200S], [R75, darkPanelColors.R900], [R100, darkPanelColors.R800S], [P50, darkPanelColors.P1200S], [P75, darkPanelColors.P900], [P100, darkPanelColors.P800S]];

// used for custom panels
export var getPanelDarkColor = function getPanelDarkColor(panelColor) {
  var colorObject = panelDarkModeColors.find(function (color) {
    return color[0] === panelColor || color[1] === panelColor;
  });
  return colorObject ? colorObject[1] : darkPanelColors.B1200S;
};

// used for custom panels
export var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
  var _ref2 = _slicedToArray(_ref, 2),
    colorName = _ref2[0],
    colorValue = _ref2[1];
  return getPanelDarkModeCSS(colorName, colorValue);
}).join('\n');
export function getPanelDarkModeCSS(colorName, colorValue) {
  return "\n  &[data-panel-color=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n    color: ").concat(darkPanelColors.TextColor, ";\n  }\n  ");
}
var prefix = 'ak-editor-panel';
export var PanelSharedCssClassName = {
  prefix: prefix,
  content: "".concat(prefix, "__content"),
  icon: "".concat(prefix, "__icon")
};
export var PanelSharedSelectors = {
  infoPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.INFO, "]"),
  notePanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.NOTE, "]"),
  warningPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.WARNING, "]"),
  errorPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.ERROR, "]"),
  successPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.SUCCESS, "]"),
  noteButton: "button[aria-label=\"Note\"]",
  warningButton: "button[aria-label=\"Warning\"]",
  removeButton: "button[aria-label=\"Remove\"]",
  colorPalette: "[aria-label=\"Background color\"]",
  selectedColor: "[aria-label=\"Light green\"]",
  removeEmojiIcon: "[aria-label=\"Remove emoji\"]",
  emojiIcon: "[aria-label=\"editor-add-emoji\"]",
  selectedEmoji: "[aria-label=\":grinning:\"]",
  addYourOwnEmoji: "#add-custom-emoji",
  emojiNameInCustomEmoji: "[aria-label=\"Enter a name for the new emoji\"]",
  title: "#editor-title",
  emojiPopup: "[aria-label=\"Popup\"]",
  searchEmoji: "[aria-label=\"Emoji name\"]",
  orangeWarningIcon: "[aria-label=\":warning:\"]",
  yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)",
  copyButton: "button[aria-label=\"Copy\"]"
};
var iconDynamicStyles = function iconDynamicStyles(panelType) {
  return "color: ".concat(lightIconColor[panelType], ";");
};

// Provides the color without tokens, used when converting to a custom panel
export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
  return lightPanelColors[panelType] || 'none';
};
export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
  return hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';
};
var mainDynamicStyles = function mainDynamicStyles(panelType) {
  return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
};

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: ", " 0 ", ";\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
};
export var panelSharedStyles = function panelSharedStyles() {
  return css(_defineProperty({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
};