import '../mixins/Root.module.css.mjs';
import '../mixins/inputBase.module.css.mjs';
import '../mixins/i18n.module.css.mjs';
import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import classNames from '../../../../../../_virtual/index.mjs';
import React__default, { useRef, useState, useEffect, useMemo } from 'react';
import { useMediaQuery } from '../../hooks/useMediaQuery.mjs';
import Column from '../atoms/Column.mjs';
import { ToastContainer } from '../atoms/Toast.mjs';
import Watermark from '../atoms/Watermark.mjs';
import modules_852c89cd from './MainContainer.module.css.mjs';

// This order is important - we need mixins to appear first so later styles can override them
const MainContainer = ({ children, displayWatermark, theme })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const ref = useRef(null);
    const { className, style } = useRootStyles(theme, ref);
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6,
        style: style,
        className: classNames(modules_852c89cd.container, className),
        ref: ref
    }, children, displayWatermark && /*#__PURE__*/ React__default.createElement("div", {
        className: modules_852c89cd.watermarkContainer
    }, /*#__PURE__*/ React__default.createElement(Watermark, {
        poweredBy: $__i18n._({
            id: "watermark.poweredBy",
            message: "Powered by"
        }),
        label: $__i18n._({
            id: "watermark.altText",
            message: "Stytch by Twilio"
        })
    })), /*#__PURE__*/ React__default.createElement(ToastContainer, null));
};
function useRootStyles(theme, ref) {
    const rawBreakpoint = theme['mobile-breakpoint'];
    // Media queries don't play well with CSS custom properties, so as a workaround we parse var() expressions out of the
    // breakpoint string and replace them with values resolved using getComputedStyle().
    const [breakpoint, setBreakpoint] = useState(rawBreakpoint);
    useEffect(()=>{
        setBreakpoint(parseCssVar(rawBreakpoint, ref.current));
    }, [
        rawBreakpoint,
        ref
    ]);
    const isMobile = useMediaQuery(`(max-width: ${breakpoint})`);
    const themeVariables = useMemo(()=>themeToCssVariables(theme), [
        theme
    ]);
    return {
        style: themeVariables,
        className: classNames({
            '-st-mobile': isMobile
        })
    };
}
function themeToCssVariables(theme) {
    const { 'color-scheme': colorScheme, ...themeVariables } = theme;
    const variables = Object.fromEntries(// eslint-disable-next-line lingui/no-unlocalized-strings
    Object.entries(themeVariables).map(([key, value])=>[
            `--st-${key}`,
            value
        ]));
    if (theme['color-scheme'] === 'shadcn') {
        variables['--st-color-scheme'] = 'inherit';
    } else {
        variables['--st-color-scheme'] = colorScheme;
        variables['--st-dark-mode'] = theme['color-scheme'] === 'dark' ? '1' : '0';
    }
    return variables;
}
function parseCssVar(value, element) {
    if (!element) return value;
    // Ideally we would use CSSStyleValue.parse() instead of regex, but that's not currently well supported
    // https://caniuse.com/mdn-api_cssstylevalue_parse_static
    const replaced = value.replace(/var\s*\([^)]+\)/gi, (r)=>{
        // r is going to be var(..., ...), so we use a similar regex with a capture group to match the stuff in the brackets
        // variable should always exist but defaultValue may not
        const [variable, defaultValue] = r.match(/\(([^)]+)\)/)[1].split(',').map((s)=>s.trim());
        const propertyValue = window.getComputedStyle(element).getPropertyValue(variable);
        return propertyValue || defaultValue || r;
    });
    return replaced === value ? replaced : parseCssVar(replaced, element);
}

export { MainContainer as default, parseCssVar, themeToCssVariables, useRootStyles };
//# sourceMappingURL=MainContainer.mjs.map
