import React, {
  useCallback,
  useEffect,
  useState,
  PropsWithChildren,
} from 'react';
import RNShake from 'react-native-shake';
import {useNavigation, NavigationProp} from '@react-navigation/native';
import {useBugReportStore} from '@modules/bugReport/store';
import {RootStackParamList} from '@navigation/interfaces';
import {useIsLogged} from '@redux/selectors';
import {Screens} from '@shared/constants';
import {useFeatureFlag} from '@stores/featureFlags';

import {ShakeReportBottomSheet} from '../ShakeReportBottomSheet';

export function ShakeDetector({children}: PropsWithChildren) {
  const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const isBugReportEnabled = useFeatureFlag('BUG_REPORT_ENABLED');
  const isShakeEnabled = useBugReportStore(state => state.isShakeEnabled);
  const isLogged = useIsLogged();

  useEffect(() => {
    if (!isBugReportEnabled || !isShakeEnabled || !isLogged) {
      return;
    }

    const subscription = RNShake.addListener(() => {
      setIsBottomSheetVisible(true);
    });

    return () => {
      subscription.remove();
    };
  }, [isBugReportEnabled, isShakeEnabled, isLogged]);

  const onClose = useCallback(() => {
    setIsBottomSheetVisible(false);
  }, []);

  const onReportPress = useCallback(() => {
    setIsBottomSheetVisible(false);
    navigation.navigate(Screens.REPORT_BUG);
  }, [navigation]);

  if (!isBugReportEnabled || !isLogged) {
    return <>{children}</>;
  }

  return (
    <>
      {children}
      <ShakeReportBottomSheet
        isVisible={isBottomSheetVisible}
        onClose={onClose}
        onReportPress={onReportPress}
      />
    </>
  );
}