import React from 'react';
import { AppRegistry, StatusBar, View, StyleSheet, useColorScheme } from 'react-native';
import { Provider, useSelector } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
import App from './src/App';
import { name as appName } from './app.json';
import { persistor, store } from './src/appredux/store';

const Main = () => {
    const systemTheme = useColorScheme();
    const { theme, useSystemTheme } = useSelector(state => state.themeReducer);

    const customColors = {
        blue: '#3876BF',
        semiBlue: '#DCECFF',
        beanRed: '#EF6262',
        semiRed: '#FFC5C3',
        semiYellow: '#FFE7A3',
        orange: '#FAA300',
        green: '#17C13E',
        semigreen: '#E3F8E8',
        black: '#333333',
        mistBlue: '#667085',
        amethystSmoke: '#9A99AB',
        mercury: '#E4E4E7',
        catskillWhite: '#F2F4F6',
        white: '#F9F9F9',
        pureWhite: '#FFFFFF',
    };

    const lightTheme = {
        ...MD3LightTheme,
        colors: {
            ...MD3LightTheme.colors,
            ...customColors,
            background: customColors.white,
            text: customColors.black,
        },
    };

    const darkTheme = {
        ...MD3DarkTheme,
        colors: {
            ...MD3DarkTheme.colors,
            ...customColors,
            background: customColors.black,
            text: customColors.white,
        },
    };

    const appliedTheme = useSystemTheme ? (systemTheme === 'dark' ? darkTheme : lightTheme) : (theme === 'dark' ? darkTheme : lightTheme);

    return (
        <PaperProvider theme={appliedTheme}>
            <App />
        </PaperProvider>
    );
};

const AppWrapper = () => (
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <Main />
        </PersistGate>
    </Provider>
);

AppRegistry.registerComponent(appName, () => AppWrapper);