import { selectTheme } from "@/redux/app/app.selectors";
import { darkTheme, lightTheme } from "@/util/theme";
import { useColorScheme } from "react-native";
import { useSelector } from "react-redux";

type ThemePreference = "light" | "dark" | "system";

/**
 * Custom hook that returns the appropriate theme based on user preference
 * 
 * This hook automatically selects the correct theme (light or dark) based on:
 * - User's explicit preference (light/dark)  
 * - System appearance when "system" is selected
 * - Defaults to system theme if no preference is set
 * 
 * @returns The theme object compatible with React Native Paper
 * 
 * @example
 * ```typescript
 * import { useTheme } from "@/hooks/useTheme";
 * 
 * const MyComponent = () => {
 *   const theme = useTheme();
 *   
 *   return (
 *     <View style={{ backgroundColor: theme.colors.background }}>
 *       <Text style={{ color: theme.colors.onBackground }}>
 *         Themed content
 *       </Text>
 *     </View>
 *   );
 * };
 * ```
 */
export const useTheme = () => {
  const userThemePreference: ThemePreference = useSelector(selectTheme);
  const systemColorScheme = useColorScheme();

  // Determine which theme to use based on user preference
  let selectedTheme;
  
  switch (userThemePreference) {
    case "light":
      selectedTheme = lightTheme;
      break;
    case "dark":
      selectedTheme = darkTheme;
      break;
    case "system":
    default:
      // Use system preference when user selects "system" or as fallback
      selectedTheme = systemColorScheme === "dark" ? darkTheme : lightTheme;
      break;
  }

  return selectedTheme;
};