"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackground = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _editorPalette = require("@atlaskit/editor-palette");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _consts = require("@atlaskit/editor-shared-styles/consts");
var _emoji = require("@atlaskit/emoji");
var _colors = require("@atlaskit/theme/colors");
var _templateObject;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
var lightPanelColors = {
  info: _colors.B50,
  note: _colors.P50,
  tip: _colors.G50,
  success: _colors.G50,
  warning: _colors.Y50,
  error: _colors.R50
};
var darkPanelColors = exports.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(_colors.B400, ")"),
  note: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
  tip: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
  success: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
  warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")"),
  error: "var(--ds-icon-danger, ".concat(_colors.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 - _consts.akEditorCustomIconSize) / 2;
var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;

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

// used for custom panels
var getPanelDarkColor = exports.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
var getPanelBackgroundDarkModeColors = exports.getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
    colorName = _ref2[0],
    colorValue = _ref2[1];
  return getPanelDarkModeCSS(colorName, colorValue);
}).join('\n');
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';
var PanelSharedCssClassName = exports.PanelSharedCssClassName = {
  prefix: prefix,
  content: "".concat(prefix, "__content"),
  icon: "".concat(prefix, "__icon")
};
var PanelSharedSelectors = exports.PanelSharedSelectors = {
  infoPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.INFO, "]"),
  notePanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.NOTE, "]"),
  warningPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.WARNING, "]"),
  errorPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.ERROR, "]"),
  successPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.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
var getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
  return lightPanelColors[panelType] || 'none';
};
var getPanelTypeBackground = exports.getPanelTypeBackground = function getPanelTypeBackground(panelType) {
  return (0, _editorPalette.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…
var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
};
var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
  return (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
};