import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
import _styled from '@emotion/styled/base';
import { useState, useEffect } from 'react';
import _pt from 'prop-types';
import { designTokens } from '@commercetools-uikit/design-system';
import murmurhash from 'murmurhash';
import { c as cssVarToValue, a as colors, t as typography, u as useLazyLoad } from './index-a3cc6dec.esm.js';
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
import { jsx, Fragment } from '@emotion/react/jsx-runtime';
import '@babel/runtime-corejs3/core-js-stable/parse-int';
import '@babel/runtime-corejs3/core-js-stable/instance/concat';
import '@babel/runtime-corejs3/core-js-stable/object/from-entries';
import '@babel/runtime-corejs3/core-js-stable/instance/map';
import '@babel/runtime-corejs3/core-js-stable/object/entries';
import 'lodash.kebabcase';
import '@babel/runtime-corejs3/helpers/defineProperty';
import '@babel/runtime-corejs3/core-js-stable/instance/find';
import '@babel/runtime-corejs3/core-js-stable/array/is-array';
import '@babel/runtime-corejs3/core-js-stable/instance/reduce';
import '@babel/runtime-corejs3/core-js-stable/object/keys';
import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import '@babel/runtime-corejs3/core-js-stable/instance/filter';
import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import '@babel/runtime-corejs3/core-js-stable/object/define-property';
import 'react-is';
import '@emotion/react';
import '@commercetools-uikit/tooltip';
import '@commercetools-uikit/icons';
import '@commercetools-uikit/spacings-inline';
import '@babel/runtime-corejs3/core-js-stable/instance/trim';
import '@babel/runtime-corejs3/core-js-stable/array/from';
import '@babel/runtime-corejs3/core-js/instance/match-all';
import '@babel/runtime-corejs3/core-js-stable/instance/includes';
import '@babel/runtime-corejs3/core-js-stable/set-timeout';
import '@babel/runtime-corejs3/core-js-stable/instance/some';
import 'react-dom';
import 'prism-react-renderer';
import '@babel/runtime-corejs3/core-js-stable/promise';
import '@babel/runtime-corejs3/core-js-stable/instance/sort';
import '@babel/runtime-corejs3/core-js-stable/instance/flat';
import 'swr';
import '@commercetools-uikit/utils';
import '@commercetools-uikit/accessible-button';
import 'tiny-invariant';
import 'unified';
import 'unist-util-filter';
import 'rehype-react';
import 'remark-parse';
import 'remark-frontmatter';
import 'remark-rehype';
import 'react-intl';
import 'react-modal';
import '@commercetools-uikit/card';
import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
import '@commercetools-uikit/primary-button';
import '@commercetools-uikit/flat-button';
import '@commercetools-uikit/secondary-button';
import '@commercetools-uikit/spacings';
import 'lodash.omitby';
import '@commercetools-uikit/secondary-icon-button';
import '@commercetools-uikit/text';
import '@react-hook/resize-observer';
import '@babel/runtime-corejs3/core-js-stable/map';
import '@babel/runtime-corejs3/core-js-stable/instance/index-of';
import '@babel/runtime-corejs3/core-js-stable/instance/splice';
import '@react-hook/latest';
import 'raf-schd';
import '@babel/runtime-corejs3/helpers/classCallCheck';
import '@babel/runtime-corejs3/helpers/createClass';

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: cssVarToValue(colors.light.surfacePrimary),
    lineColor: cssVarToValue(colors.light.borderInfo),
    textColor: cssVarToValue(colors.light.textPrimary),
    fontFamily: typography.fontFamilies.primary,
    fontSize: typography.fontSizes.body,
    primaryColor: cssVarToValue(designTokens.colorInfo95),
    primaryBorderColor: cssVarToValue(designTokens.colorInfo),
    primaryTextColor: cssVarToValue(colors.light.textPrimary),
    secondaryColor: cssVarToValue(designTokens.colorAccent40),
    secondaryBorderColor: cssVarToValue(designTokens.colorAccent30),
    secondaryTextColor: cssVarToValue(colors.light.textPrimary),
    tertiaryColor: cssVarToValue(designTokens.colorPrimary95),
    tertiaryBorderColor: cssVarToValue(designTokens.colorPrimary25),
    tertiaryTextColor: cssVarToValue(colors.light.textPrimary),
    // notes are conventionally yellow but there is none in the design system
    noteBkgColor: 'lightyellow',
    noteTextColor: cssVarToValue(colors.light.textPrimary),
    noteBorderColor: 'yellow',
    errorBkgColor: cssVarToValue(colors.light.surfaceError),
    errorTextColor: cssVarToValue(colors.light.textError),
    // sequence diagram specifics:
    // https://mermaid-js.github.io/mermaid/#/theming?id=sequence-diagram
    sequenceNumberColor: cssVarToValue(colors.light.textInverted),
    actorLineColor: cssVarToValue(colors.light.borderInfo),
    // flow chart specifics:
    // https://mermaid-js.github.io/mermaid/#/theming?id=flowchart
    edgeLabelBackground: cssVarToValue(colors.light.surfaceSecondary1)
  },
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'cardinal'
  },
  sequence: {
    // https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=possible-configuration-parameters
    fontFamily: 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: typography.fontSizes.body,
    actorFontWeight: typography.fontWeights.regular,
    messageFontSize: typography.fontSizes.body,
    messageFontFamily: typography.fontFamilies.primary,
    messageFontWeight: typography.fontWeights.regular,
    noteFontSize: typography.fontSizes.small
  },
  gantt: {
    numberSectionStyles: 4,
    axisFormat: '%Y-%m-%d',
    fontFamily: 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(colors.light.textSecondary, "\n    fill: inherit;\n    stroke: inherit;\n  }\n")
};
const Wrapper = /*#__PURE__*/_styled("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.v3(graph));
const Mermaid = _ref => {
  let graph = _ref.graph;
  const _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    svg = _useState2[0],
    setSvg = _useState2[1];
  const mermaidLoadStatus = useLazyLoad("https://cdn.jsdelivr.net/npm/mermaid@".concat(mermaidVersion, "/dist/mermaid.min.js"));
  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 jsx(Fragment, {
    children: mermaidLoadStatus === 'ready' ? jsx(Wrapper, {
      "data-testid": "mermaid-diagram",
      dangerouslySetInnerHTML: {
        __html: svg
      }
    }) : jsx(LoadingSpinner, {
      scale: "l",
      maxDelayDuration: 0
    })
  });
};
Mermaid.propTypes = process.env.NODE_ENV !== "production" ? {
  graph: _pt.string.isRequired
} : {};

export { Mermaid as default };
