var _NextNProgressBar, _CssBaseline, _SkipLink, _MarkdownLinks;
import * as React from 'react';
import { useRouter } from 'next/router';
import deepmerge from '@mui/utils/deepmerge';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
import { colorChannel, getContrastRatio, lighten, darken } from '@mui/system/colorManipulator';
import CssBaseline from '@mui/material/CssBaseline';
import { getCookie, pathnameToLanguage } from "../helpers/helpers.js";
import { NextNProgressBar } from "../NextNProgressBar/index.js";
import { getDesignTokens, getThemedComponents } from "./brandingTheme.js";
import { SkipLink, MarkdownLinks } from "../Link/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  palette: lightPalette,
  typography,
  ...designTokens
} = getDesignTokens('light');
const {
  palette: darkPalette
} = getDesignTokens('dark');
const themeOptions = {
  colorSchemes: {
    light: {
      palette: lightPalette
    },
    dark: {
      palette: darkPalette
    }
  },
  ...designTokens,
  typography: deepmerge(typography, {
    h1: {
      ':where([data-mui-color-scheme="dark"]) &': {
        color: 'var(--muidocs-palette-common-white)'
      }
    },
    h2: {
      ':where([data-mui-color-scheme="dark"]) &': {
        color: 'var(--muidocs-palette-grey-100)'
      }
    },
    h5: {
      ':where([data-mui-color-scheme="dark"]) &': {
        color: 'var(--muidocs-palette-primary-300)'
      }
    }
  }),
  ...getThemedComponents()
};
export function setDocsColors(primary, secondary) {
  function injectPalette(prefix, palette, color, el) {
    // simplified logic of `createPalette` to avoid `useTheme`.
    const light = lighten(color, 0.2);
    const dark = darken(color, 0.3);
    const contrastText = getContrastRatio(color, '#fff') >= 3 ? '#fff' : 'rgba(0, 0, 0, 0.87)';
    const elStyle = el.style;
    elStyle.setProperty(`--${prefix}-palette-${palette}-main`, color);
    elStyle.setProperty(`--${prefix}-palette-${palette}-mainChannel`, colorChannel(color));
    elStyle.setProperty(`--${prefix}-palette-${palette}-light`, light);
    elStyle.setProperty(`--${prefix}-palette-${palette}-lightChannel`, colorChannel(light));
    elStyle.setProperty(`--${prefix}-palette-${palette}-dark`, dark);
    elStyle.setProperty(`--${prefix}-palette-${palette}-darkChannel`, colorChannel(dark));
    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastText`, contrastText);
    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastTextChannel`, colorChannel(contrastText));
  }
  if (typeof document !== 'undefined') {
    const htmlEl = document.documentElement;
    injectPalette('muidocs', 'primary', primary.main, htmlEl);
    injectPalette('muidocs', 'secondary', secondary.main, htmlEl);
    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
      htmlEl.style.setProperty(`--muidocs-palette-primary-${key}`, primary[key]);
      htmlEl.style.setProperty(`--muidocs-palette-secondary-${key}`, secondary[key]);
    });
    injectPalette('mui', 'primary', primary.main, htmlEl);
    injectPalette('mui', 'secondary', secondary.main, htmlEl);
  }
}
export function resetDocsColor() {
  if (typeof document !== 'undefined') {
    const htmlElStyle = document.documentElement.style;
    htmlElStyle.removeProperty('--muidocs-palette-primary-main');
    htmlElStyle.removeProperty('--muidocs-palette-secondary-main');
    htmlElStyle.removeProperty('--mui-palette-primary-main');
    htmlElStyle.removeProperty('--mui-palette-secondary-main');
    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
      htmlElStyle.removeProperty(`--muidocs-palette-primary-${key}`);
      htmlElStyle.removeProperty(`--muidocs-palette-secondary-${key}`);
    });
  }
}
export function setDocsSpacing(value) {
  if (typeof document !== 'undefined') {
    const htmlElStyle = document.documentElement.style;
    htmlElStyle.setProperty('--muidocs-spacing', `${value}px`);
    htmlElStyle.setProperty('--mui-spacing', `${value}px`);
  }
}
export function resetDocsSpacing() {
  if (typeof document !== 'undefined') {
    const htmlElStyle = document.documentElement.style;
    htmlElStyle.removeProperty('--muidocs-spacing');
    htmlElStyle.removeProperty('--mui-spacing');
  }
}
const themeCache = new Map();
export function getTheme(direction) {
  let cachedTheme = themeCache.get(direction);
  if (!cachedTheme) {
    cachedTheme = createTheme({
      cssVariables: {
        cssVarPrefix: 'muidocs',
        colorSchemeSelector: 'data-mui-color-scheme'
      },
      direction,
      ...themeOptions
    });
    themeCache.set(direction, cachedTheme);
  }
  return cachedTheme;
}
export function BrandingCssThemeProvider({
  children,
  direction = 'ltr',
  forceThemeRerender = false
}) {
  const theme = React.useMemo(() => getTheme(direction), [direction]);
  return /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    disableTransitionOnChange: true
    // TODO: remove `forceThemeRerender` once custom theme on some demos rely on CSS variables instead of `theme.palette.mode`
    ,
    forceThemeRerender: forceThemeRerender,
    children: children
  });
}
export function BrandingCssVarsProvider(props) {
  const {
    direction = 'ltr',
    children
  } = props;
  const {
    asPath
  } = useRouter();
  const {
    canonicalAs
  } = pathnameToLanguage(asPath);
  useEnhancedEffect(() => {
    const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
    if (nextPaletteColors) {
      setDocsColors(nextPaletteColors.primary, nextPaletteColors.secondary);
    }
  }, []);
  useEnhancedEffect(() => {
    // This is required to ensure that the layer order is declared first in the head
    // because when the direction is RTL on the client, emotion reinserts the RTL styles back to the top of the insertion point.
    if (direction === 'rtl') {
      const head = document.querySelector('head');
      if (head) {
        const style = document.createElement('style');
        style.textContent = '@layer theme, docsearch, mui, mui.global, mui.default, mui.theme, mui.custom, mui.sx, utilities;';
        head.prepend(style);
      }
    }
  }, [direction]);
  return /*#__PURE__*/_jsxs(BrandingCssThemeProvider, {
    forceThemeRerender: canonicalAs.startsWith('/x/') || canonicalAs.startsWith('/toolpad/'),
    children: [_NextNProgressBar || (_NextNProgressBar = /*#__PURE__*/_jsx(NextNProgressBar, {})), _CssBaseline || (_CssBaseline = /*#__PURE__*/_jsx(CssBaseline, {})), _SkipLink || (_SkipLink = /*#__PURE__*/_jsx(SkipLink, {})), _MarkdownLinks || (_MarkdownLinks = /*#__PURE__*/_jsx(MarkdownLinks, {})), children]
  });
}