import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
} from "@gorhom/bottom-sheet";
import React, {
  ReactNode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { BackHandler, StyleSheet } from "react-native";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
  BottomSheetStackContext,
  BottomSheetStackItem,
} from "./BottomSheetStackContext";

export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
  children,
}) => {
  const [stack, setStack] = useState<BottomSheetStackItem[]>([]);
  const sheetRef = useRef<BottomSheet>(null);
  const { top } = useSafeAreaInsets();

  const push = useCallback((item: BottomSheetStackItem) => {
    setStack((prev) => [...prev, item]);
  }, []);

  const clear = useCallback(() => {
    setStack([]);
  }, []);

  const pop = useCallback(() => {
    setStack((prev) => prev.slice(0, -1));
  }, []);

  const replace = useCallback((item: BottomSheetStackItem) => {
    setStack([item]);
  }, []);

  const currentItem = useMemo(() => stack[stack.length - 1], [stack]);
  const canGoBack = stack.length > 1;
  const isOpen = stack.length > 0;

  useEffect(() => {
    if (stack === undefined || stack.length === 0) {
      sheetRef.current?.close();
    }
    if (isOpen && currentItem) {
      sheetRef.current?.snapToIndex(currentItem.initialSnapIndex ?? 0);
    }

    const backHandlerSubscription = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        if (canGoBack) {
          pop();
          return true;
        }
        if (!canGoBack && stack.length === 1) {
          sheetRef.current?.close();
          return true;
        }
        return false;
      }
    );

    return () => backHandlerSubscription.remove();
  }, [isOpen, canGoBack, currentItem, pop, stack]);

  const AnimatedView = Animated.View;
  const enteringAnimation = FadeIn.duration(200);
  const exitingAnimation = FadeOut.duration(200);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        style={[props.style, { backgroundColor: "rgba(0,0,0,0.6)" }]}
        appearsOnIndex={0}
        pressBehavior={"close"}
      />
    ),
    []
  );

  const contextValue = useMemo(
    () => ({
      push,
      pop,
      replace,
      clear,
    }),
    [push, pop, replace, clear]
  );

  return (
    <BottomSheetStackContext.Provider value={contextValue}>
      {children}
      <BottomSheet
        ref={sheetRef}
        index={-1}
        snapPoints={currentItem?.snapPoints || ["100%"]}
        enableDynamicSizing={currentItem?.dynamicSizing || false}
        enablePanDownToClose
        android_keyboardInputMode="adjustResize"
        enableBlurKeyboardOnGesture
        keyboardBlurBehavior="restore"
        keyboardBehavior="fillParent"
        onClose={clear}
        backdropComponent={renderBackdrop}
        topInset={top}
        handleIndicatorStyle={{ backgroundColor: "#CCCCCC" }}
        {...currentItem?.bottomSheetProps}
      >
        {currentItem && (
          <AnimatedView
            key={stack.length}
            entering={enteringAnimation}
            exiting={exitingAnimation}
            style={styles.animatedView}
          >
            {currentItem.component}
          </AnimatedView>
        )}
      </BottomSheet>
    </BottomSheetStackContext.Provider>
  );
};

const styles = StyleSheet.create({
  animatedView: {
    flex: 1,
  },
});