import { StatusBar, StyleSheet, useColorScheme } from 'react-native';
import Toast from 'react-native-toast-message';
import { AppProvider } from '@app/contexts/AppProvider.tsx';
import { RootSiblingParent } from 'react-native-root-siblings';
import NavigationContainer from '@app/routes/NavigationContainer';
import BottomSheet from '@common/components/BottomSheet.tsx';
import Alert from '@common/components/Alert.tsx';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppProvider>
        <RootSiblingParent>
          {/*<CopilotProvider*/}
          {/*  backdropColor="rgba(0, 0, 0, 0.7)"*/}
          {/*  stepNumberComponent={() => null}*/}
          {/*  arrowSize={0}*/}
          {/*  tooltipStyle={styles.tooltip}*/}
          {/*  tooltipComponent={TooltipComponent}*/}
          {/*>*/}
          <NavigationContainer />
          {/*</CopilotProvider>*/}
        </RootSiblingParent>
        <BottomSheet ref={ref => BottomSheet.setRef(ref)} />
        <Alert ref={ref => Alert.setRef(ref)} />
        <Toast />
      </AppProvider>
    </>
  );
}

const styles = StyleSheet.create({
  tooltip: {
    backgroundColor: 'rgba(0, 0, 0, 0)',
  },
});

export default App;