import * as React from 'react';
import { Platform, StatusBar, StatusBarStyle, View } from 'react-native';
import { SafeAreaView } from '../components/ui';
import { useIsFocused } from '@react-navigation/native';
import { getColor } from './style-utils';

interface TopNavigationProps {
  children: React.ReactNode;
  backgroundColor?: string;
  aosTopSafePadding?: boolean;
  className?: any;
  barStyle?: StatusBarStyle | undefined;
}

const TopNavigation = React.forwardRef<View, TopNavigationProps>(
  (
    {
      children,
      aosTopSafePadding = true,
      backgroundColor = '#000000',
      className,
      barStyle = 'dark-content',
    },
    ref,
  ) => {
    const isFocused = useIsFocused();
    const Container = Platform.OS === 'ios' ? SafeAreaView : View;

    const statusBarHeight =
      Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0;

    React.useEffect(() => {
      if (isFocused) {
        if (Platform.OS === 'android') {
          StatusBar.setBackgroundColor(getColor(backgroundColor));
        }
        StatusBar.setBarStyle(barStyle);
      }
    }, [isFocused, backgroundColor, barStyle]);

    return (
      <View
        ref={ref}
        className={`flex-1 ${className}`}
        style={[{ backgroundColor: getColor(backgroundColor) }]}
      >
        <Container
          style={{
            flex: 1,
            backgroundColor: getColor(backgroundColor),
            ...(Platform.OS === 'android'
              ? { paddingTop: aosTopSafePadding ? statusBarHeight : 0 }
              : {}),
          }}
          {...(Platform.OS === 'ios' ? { edges: ['top'] } : {})}
        >
          {children}
        </Container>
      </View>
    );
  },
);

export default TopNavigation;