import React, { useEffect, useState, createContext } from "react";
import { useColorScheme } from "react-native";
import { baseTheme } from "./base/index";
import { GestureHandlerRootView } from "react-native-gesture-handler";
export const themeContext = /*#__PURE__*/createContext({});

/**
 * The main provider component which controls the theme and color mode of the components in the entire application.
 */
export const ThemeProvider = ({
  initialColorMode = "light",
  theme = baseTheme,
  haveFontsLoaded = true,
  children
}) => {
  const systemThemeStyle = useColorScheme();
  const [colorMode, setColorMode] = useState(initialColorMode === "system" ? systemThemeStyle : initialColorMode);
  const switchColorMode = colorMode => {
    if (colorMode === "dark") {
      setColorMode("dark");
    } else if (colorMode == "light") {
      setColorMode("light");
    } else {
      setColorMode(systemThemeStyle);
    }
  };
  const toggleColorMode = () => {
    if (colorMode === "light") {
      switchColorMode("dark");
    } else {
      switchColorMode("light");
    }
  };
  useEffect(() => {
    let activeTheme = initialColorMode === "system" ? systemThemeStyle : initialColorMode;
    switchColorMode(activeTheme);
  }, [theme, initialColorMode, systemThemeStyle]);
  if (haveFontsLoaded) {
    return /*#__PURE__*/React.createElement(themeContext.Provider, {
      value: {
        theme,
        colorMode,
        toggleColorMode,
        switchColorMode
      }
    }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
      style: {
        flex: 1
      }
    }, children));
  }
  return null;
};
//# sourceMappingURL=theme-context.js.map