import React, { useContext, useEffect } from "react";
import LocalLogicClient from "@local-logic/client";
import { setCSSVariables } from "./colors";
const LocalLogicContext = React.createContext({});
const useLocalLogic = () => useContext(LocalLogicContext);
const LocalLogicProvider = ({ appearance, apiKey, externalId, children, locale, product, environment, }) => {
    useEffect(() => {
        /**
         * Sets the major theme.
         */
        if (appearance === null || appearance === void 0 ? void 0 : appearance.theme) {
            document.documentElement.setAttribute("data-theme", appearance === null || appearance === void 0 ? void 0 : appearance.theme);
        }
        /**
         * Allows clients to override CSS theme variables.
         */
        setCSSVariables(appearance === null || appearance === void 0 ? void 0 : appearance.variables);
    }, [appearance === null || appearance === void 0 ? void 0 : appearance.theme, appearance === null || appearance === void 0 ? void 0 : appearance.variables]);
    if (!apiKey) {
        throw Error("A valid apiKey must be provided.");
    }
    const client = LocalLogicClient(apiKey, {
        locale,
        product,
        environment,
    });
    return (React.createElement(LocalLogicContext.Provider, { value: {
            client,
            locale,
            options: {
                externalId,
                appearance,
            },
        } }, children));
};
export { useLocalLogic, LocalLogicProvider, LocalLogicContext };
//# sourceMappingURL=index.js.map