'use strict';

var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
var _styled = require('@emotion/styled/base');
var React = require('react');
var _pt = require('prop-types');
var designSystem = require('@commercetools-uikit/design-system');
var murmurhash = require('murmurhash');
var dist_commercetoolsDocsUiKit = require('./index-1fd127ff.cjs.dev.js');
var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@babel/runtime-corejs3/core-js-stable/parse-int');
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
require('@babel/runtime-corejs3/core-js-stable/instance/map');
require('@babel/runtime-corejs3/core-js-stable/object/entries');
require('lodash.kebabcase');
require('@babel/runtime-corejs3/helpers/defineProperty');
require('@babel/runtime-corejs3/core-js-stable/instance/find');
require('@babel/runtime-corejs3/core-js-stable/array/is-array');
require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
require('@babel/runtime-corejs3/core-js-stable/object/keys');
require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
require('@babel/runtime-corejs3/core-js-stable/instance/filter');
require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
require('@babel/runtime-corejs3/core-js-stable/object/define-property');
require('react-is');
require('@emotion/react');
require('@commercetools-uikit/tooltip');
require('@commercetools-uikit/icons');
require('@commercetools-uikit/spacings-inline');
require('@babel/runtime-corejs3/core-js-stable/instance/trim');
require('@babel/runtime-corejs3/core-js-stable/array/from');
require('@babel/runtime-corejs3/core-js/instance/match-all');
require('@babel/runtime-corejs3/core-js-stable/instance/includes');
require('@babel/runtime-corejs3/core-js-stable/set-timeout');
require('@babel/runtime-corejs3/core-js-stable/instance/some');
require('react-dom');
require('prism-react-renderer');
require('@babel/runtime-corejs3/core-js-stable/url-search-params');
require('swr');
require('@babel/runtime-corejs3/core-js-stable/instance/find-index');
require('@commercetools-uikit/utils');
require('@commercetools-uikit/accessible-button');
require('tiny-invariant');
require('unified');
require('unist-util-filter');
require('rehype-react');
require('remark-parse');
require('remark-frontmatter');
require('remark-rehype');
require('react-intl');
require('react-modal');
require('@commercetools-uikit/card');
require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
require('@commercetools-uikit/primary-button');
require('@commercetools-uikit/flat-button');
require('@commercetools-uikit/secondary-button');
require('@commercetools-uikit/spacings');
require('lodash.omitby');
require('@commercetools-uikit/secondary-icon-button');
require('@commercetools-uikit/text');
require('@react-hook/resize-observer');
require('@babel/runtime-corejs3/core-js-stable/map');
require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
require('@babel/runtime-corejs3/core-js-stable/instance/splice');
require('@react-hook/latest');
require('raf-schd');
require('@babel/runtime-corejs3/helpers/classCallCheck');
require('@babel/runtime-corejs3/helpers/createClass');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
var murmurhash__default = /*#__PURE__*/_interopDefault(murmurhash);
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const mermaidVersion = '9.3';

// styling happens through a mix of the generic "themeVariables", diagram
// type specific settings and direct CSS classes for diagram types
// that are not using themeVariables yet. It seems there is no more consistent way to
// theme mermaid across diagram types - lots of legacy config.
const config = {
  startOnLoad: false,
  theme: 'base',
  securityLevel: 'antiscript',
  arrowMarkerAbsolute: false,
  themeVariables: {
    // https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table
    background: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.surfacePrimary),
    lineColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.borderInfo),
    textColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textPrimary),
    fontFamily: dist_commercetoolsDocsUiKit.typography.fontFamilies.primary,
    fontSize: dist_commercetoolsDocsUiKit.typography.fontSizes.body,
    primaryColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorInfo95),
    primaryBorderColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorInfo),
    primaryTextColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textPrimary),
    secondaryColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorAccent40),
    secondaryBorderColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorAccent30),
    secondaryTextColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textPrimary),
    tertiaryColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorPrimary95),
    tertiaryBorderColor: dist_commercetoolsDocsUiKit.cssVarToValue(designSystem.designTokens.colorPrimary25),
    tertiaryTextColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textPrimary),
    // notes are conventionally yellow but there is none in the design system
    noteBkgColor: 'lightyellow',
    noteTextColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textPrimary),
    noteBorderColor: 'yellow',
    errorBkgColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.surfaceError),
    errorTextColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textError),
    // sequence diagram specifics:
    // https://mermaid-js.github.io/mermaid/#/theming?id=sequence-diagram
    sequenceNumberColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.textInverted),
    actorLineColor: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.borderInfo),
    // flow chart specifics:
    // https://mermaid-js.github.io/mermaid/#/theming?id=flowchart
    edgeLabelBackground: dist_commercetoolsDocsUiKit.cssVarToValue(dist_commercetoolsDocsUiKit.colors.light.surfaceSecondary1)
  },
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'cardinal'
  },
  sequence: {
    // https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=possible-configuration-parameters
    fontFamily: dist_commercetoolsDocsUiKit.typography.fontFamilies.primary,
    mirrorActors: false,
    useMaxWidth: true,
    rightAngles: false,
    showSequenceNumbers: false,
    diagramMarginX: 5,
    // prevent border clipping
    diagramMarginY: 5,
    // prevent border clippings
    bottomMarginAdj: 2,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    actorFontSize: dist_commercetoolsDocsUiKit.typography.fontSizes.body,
    actorFontWeight: dist_commercetoolsDocsUiKit.typography.fontWeights.regular,
    messageFontSize: dist_commercetoolsDocsUiKit.typography.fontSizes.body,
    messageFontFamily: dist_commercetoolsDocsUiKit.typography.fontFamilies.primary,
    messageFontWeight: dist_commercetoolsDocsUiKit.typography.fontWeights.regular,
    noteFontSize: dist_commercetoolsDocsUiKit.typography.fontSizes.small
  },
  gantt: {
    numberSectionStyles: 4,
    axisFormat: '%Y-%m-%d',
    fontFamily: dist_commercetoolsDocsUiKit.typography.fontFamilies.primary
  },
  // this low level CSS override is rather a bugfix workaround, resetting fill and stroke to fix font rendering.
  themeCSS: "\n  .messageText {\n    color: ".concat(dist_commercetoolsDocsUiKit.colors.light.textSecondary, "\n    fill: inherit;\n    stroke: inherit;\n  }\n")
};
const Wrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
  target: "e7x0bf80"
} : {
  target: "e7x0bf80",
  label: "Wrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "zkhi0p",
  styles: "width:100%;display:inherit;justify-content:center"
} : {
  name: "zkhi0p",
  styles: "width:100%;display:inherit;justify-content:center",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,  */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const idForGraph = graph => "mermaid-".concat(murmurhash__default["default"].v3(graph));
const Mermaid = _ref => {
  let graph = _ref.graph;
  const _useState = React.useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    svg = _useState2[0],
    setSvg = _useState2[1];
  const mermaidLoadStatus = dist_commercetoolsDocsUiKit.useLazyLoad("https://cdn.jsdelivr.net/npm/mermaid@".concat(mermaidVersion, "/dist/mermaid.min.js"));
  React.useEffect(() => {
    if (mermaidLoadStatus === 'ready') {
      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
      const mermaid = window.mermaid;
      mermaid.initialize(config);
      mermaid.mermaidAPI.render(idForGraph(graph), graph, svg => {
        setSvg(svg);
      });
    }
  }, [graph, mermaidLoadStatus]);
  return jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: mermaidLoadStatus === 'ready' ? jsxRuntime.jsx(Wrapper, {
      "data-testid": "mermaid-diagram",
      dangerouslySetInnerHTML: {
        __html: svg
      }
    }) : jsxRuntime.jsx(LoadingSpinner__default["default"], {
      scale: "l",
      maxDelayDuration: 0
    })
  });
};
Mermaid.propTypes = process.env.NODE_ENV !== "production" ? {
  graph: _pt__default["default"].string.isRequired
} : {};

exports["default"] = Mermaid;
