/**
 * ThemeStore
 * - persists the theme across app launches
 *
 * @important - if needing to get the *resolved* `colorMode` ('light' | 'dark') from the store, use `useTheming` hook instead
 */
const useThemeStore = createWithEqualityFn<ThemeStore>()(
  persist(
    set => ({
      themeName: track.variant === 'nightly' ? 'gray' : 'blue',
      colorMode: 'system',
      setThemeName: themeName => set({ themeName }),
      setColorMode: colorMode => set({ colorMode }),
    }),
    {
      name: 'theme-store',
      storage: createJSONStorage(() => AsyncStorage),
      version: 4,
    }
  ),
  shallow
);

export default useThemeStore;

/**
 * Hook that utilizes the `useColorScheme` & `useThemeStore` to return the correct app color mode & current theme name
 */
export const useTheming = () => {
  const appearance = useColorScheme();
  const { colorMode, themeName } = useThemeStore(s => ({
    colorMode: s.colorMode,
    themeName: s.themeName,
  }));
  const resolvedColorMode = colorMode === 'system' ? appearance! : colorMode;
  const isDark = resolvedColorMode === 'dark';

  return {
    colorMode: resolvedColorMode,
    isDark,
    isLight: resolvedColorMode === 'light',
    isSystem: colorMode === 'system',
    themeName,

    /** private field to get the exact color mode */
    _colorMode: colorMode,
    _navigation: {
      dark: DarkTheme,
      light: LightTheme,
      /** current navigation theme */
      current: isDark ? DarkTheme : LightTheme,
    },
  };
};