import { useThemeContext } from '@/components/ThemeProvider';
import {
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
  ThemeProvider as NavigationThemeProvider,
} from '@react-navigation/native';
import {
  adaptNavigationTheme,
  MD3DarkTheme,
  MD3LightTheme,
  Provider,
  ProviderProps,
} from 'react-native-paper';

export function PaperProvider({ children, ...otherProps }: ProviderProps) {
  const { isThemeDark, theme } = useThemeContext();

  const { LightTheme, DarkTheme } = adaptNavigationTheme({
    reactNavigationLight: NavigationDefaultTheme,
    reactNavigationDark: NavigationDarkTheme,
    materialDark: MD3DarkTheme,
    materialLight: MD3LightTheme,
  });
  const paperTheme = isThemeDark
    ? {
        ...MD3DarkTheme,
        ...DarkTheme,
        colors: {
          ...MD3DarkTheme.colors,
          ...DarkTheme.colors,
          ...theme.dark,
        },
        fonts: {
          ...MD3DarkTheme.fonts,
          ...NavigationDarkTheme.fonts,
          ...theme.dark,
        },
      }
    : {
        ...MD3LightTheme,
        ...LightTheme,
        colors: {
          ...MD3LightTheme.colors,
          ...LightTheme.colors,
          ...theme.light,
        },
        fonts: {
          ...MD3LightTheme.fonts,
          ...NavigationDefaultTheme.fonts,
          ...theme.light,
        },
      };

  return (
    <Provider theme={paperTheme} {...otherProps}>
      <NavigationThemeProvider value={paperTheme}>
        {children}
      </NavigationThemeProvider>
    </Provider>
  );
}