import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native';

import type { DrawerNavigationProp } from '@react-navigation/drawer';
import { getHeaderTitle } from '@react-navigation/elements';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
import { Appbar } from 'react-native-paper';

import ExampleList, { examples } from './ExampleList';

// import { AcousticConnectRN, Connect } from 'react-native-acoustic-connect-beta';
// Log all exported items from the module
import AcousticConnectRN from 'react-native-acoustic-connect-beta';
import * as AcousticConnectBeta from 'react-native-acoustic-connect-beta';
console.log('RootNavigator.tsx:Exported items from react-native-acoustic-connect-beta:', AcousticConnectBeta);

const result = AcousticConnectRN.logCustomEvent('test', {test: 'test'}, 1); 
console.log('result', result);

const Stack = createStackNavigator();

export default function Root() {
  const cardStyleInterpolator =
    Platform.OS === 'android'
      ? CardStyleInterpolators.forFadeFromBottomAndroid
      : CardStyleInterpolators.forHorizontalIOS;
  return (
    <View style={styles.stackWrapper}>
      <Stack.Navigator
        screenOptions={({ navigation }) => {
          return {
            detachPreviousScreen: !navigation.isFocused(),
            cardStyleInterpolator,
            header: ({ navigation, route, options, back }) => {
              const title = getHeaderTitle(options, route.name);
              return (
                <Appbar.Header elevated>
                  {back ? (
                    <Appbar.BackAction onPress={() => navigation.goBack()} />
                  ) : (navigation as any).openDrawer ? (
                    <Appbar.Action
                      icon="menu"
                      isLeading
                      onPress={() =>
                        (
                          navigation as any as DrawerNavigationProp<{}>
                        ).openDrawer()
                      }
                    />
                  ) : null}
                  <Appbar.Content title={title} />
                </Appbar.Header>
              );
            },
          };
        }}
      >
        <Stack.Screen
          name="ExampleList"
          component={ExampleList}
          options={{
            title: 'Examples: Acoustic Connect',
          }}
        />
        {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
          return (
            <Stack.Screen
              key={id}
              name={id}
              component={examples[id]}
              options={{
                title: examples[id].title,
                headerShown: id !== 'themingWithReactNavigation',
              }}
            />
          );
        })}
      </Stack.Navigator>
    </View>
  );
}

const styles = StyleSheet.create({
  stackWrapper: {
    flex: 1,
    ...Platform.select({
      web: {
        overflow: 'scroll',
      },
    }),
  },
});