import React, {
  createContext,
  useContext,
  ReactNode,
  useState,
  useMemo,
  useEffect,
} from "react";
import { I18nManager } from "react-native";
import { ThemeType } from "./Colors"; 

interface ThemeContextValue {
  theme: ThemeType;
  isRTL: boolean;
  setTheme: (theme: ThemeType) => void;
}

export const ThemeContext = createContext<ThemeContextValue>({
  theme: {} as ThemeType,
  isRTL: I18nManager.isRTL,
  setTheme: () => {
    console.warn("setTheme was called without a ThemeProvider");
  },
});

interface ThemeProviderProps {
  children: ReactNode;
  theme: ThemeType;
}

export const RelatedProvider: React.FC<ThemeProviderProps> = ({
  children,
  theme: initialTheme,
}) => {
  const [theme, setTheme] = useState<ThemeType>(initialTheme);

  useEffect(() => {
    setTheme(initialTheme);
  }, [initialTheme]);

  const contextValue = useMemo(
    () => ({
      theme,
      setTheme,
      isRTL: I18nManager.isRTL,
    }),
    [theme],
  );

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);