import { Theme } from '@emotion/react';
import { useState, useEffect, useMemo } from 'react';
import { StatusBar, useColorScheme } from 'react-native';

import { themes, ThemeMode } from 'theme';
import {
  getStorageColorScheme,
  removeStorageColorScheme,
  setStorageColorScheme,
} from 'utils/theme';

/**
 *
 * @returns ThemeHookType type
 */

enum StatusBarStyle {
  light = 'dark-content',
  dark = 'light-content',
}
export function useTheme(): ThemeHookType {
  const [themeMode, setThemeMode] = useState<ThemeMode | null>(null);
  const systemMode = useColorScheme();
  const themeAndMode = useMemo(() => {
    const currentMode: ThemeMode = themeMode ?? (systemMode || 'light');
    StatusBar.setBarStyle(StatusBarStyle[currentMode], true);
    return { theme: themes[currentMode], mode: currentMode };
  }, [themeMode, systemMode]);

  const updateThemeMode = (mode: ThemeMode | null) => {
    setThemeMode(mode);
    if (mode == null) {
      removeStorageColorScheme();
    } else {
      setStorageColorScheme(mode);
    }
  };

  useEffect(() => {
    getStorageColorScheme().then((mode) => {
      setThemeMode(mode);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return {
    theme: themeAndMode.theme,
    updateThemeMode,
    themeMode,
    activeThemeMode: themeAndMode.mode,
  };
}

type ThemeHookType = {
  /**
   * active theme object
   */
  theme: Theme;
  /**
   * update theme mode with values light/dark/null
   */
  updateThemeMode: (colorSchema: ThemeMode | null) => void;
  /**
   * theme mode can be light/dark/null
   */
  themeMode: ThemeMode | null;
  /**
   * current theme mode is either light or dark
   */
  activeThemeMode: ThemeMode;
};