import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Platform, StyleSheet } from 'react-native';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
} from '@gorhom/bottom-sheet';
import { useStableCallback } from '../hooks/useStableCallback';
import {
  CONTAINER_HEIGHT,
  DEFAULT_BACKDROP_COLOR,
  DEFAULT_BACKDROP_OPACITY,
} from '../constants';
import { BottomSheetNavigatorContext } from '../contexts/internal';
import type { BottomSheetDescriptor } from '../types';

interface Props {
  routeKey: string;
  descriptor: BottomSheetDescriptor;
  removing?: boolean;
  onDismiss: (key: string, removed: boolean) => void;
}

const BottomSheetRoute = ({
  routeKey,
  descriptor: { options, render, navigation },
  onDismiss,
  removing = false,
}: Props) => {
  //#region extract options
  const {
    // configs
    index,
    snapPoints = ['100%'],
    detached,
    overDragResistanceFactor,
    enableOverDrag,
    enablePanDownToClose = true,
    enableContentPanningGesture,
    enableHandlePanningGesture,
    // styles
    style,
    handleStyle,
    backgroundStyle,
    handleIndicatorStyle,
    // components
    footerComponent,
    handleComponent,
    backdropComponent,
    backgroundComponent,

    backdropColor = DEFAULT_BACKDROP_COLOR,
    backdropOpacity = DEFAULT_BACKDROP_OPACITY,
    offsetY = Platform.OS === 'android' ? 20 : 3,
  } = options || {};
  //#endregion

  //#region refs
  const ref = useRef<BottomSheet>(null);
  const removingRef = useRef(false);
  removingRef.current = removing;
  //#endregion

  //#region styles
  const backdropStyle = useMemo(
    () => ({
      ...StyleSheet.absoluteFillObject,
      backgroundColor: backdropColor,
    }),
    [backdropColor]
  );
  //#endregion

  //#region context methods
  const handleSettingSnapPoints = useStableCallback(
    (_snapPoints: (string | number)[]) => {
      navigation.setOptions({ snapPoints: _snapPoints });
    }
  );

  const handleSettingEnableContentPanningGesture = useStableCallback(
    (value: boolean) => {
      navigation.setOptions({ enableContentPanningGesture: value });
    }
  );

  const handleSettingEnableHandlePanningGesture = useStableCallback(
    (value: boolean) => {
      navigation.setOptions({ enableHandlePanningGesture: value });
    }
  );

  const contextVariables = useMemo(
    () => ({
      setEnableContentPanningGesture: handleSettingEnableContentPanningGesture,
      setEnableHandlePanningGesture: handleSettingEnableHandlePanningGesture,
      setSnapPoints: handleSettingSnapPoints,
    }),
    [
      handleSettingEnableContentPanningGesture,
      handleSettingEnableHandlePanningGesture,
      handleSettingSnapPoints,
    ]
  );
  //#endregion

  //#region callbacks
  const handleOnClose = useStableCallback(() => {
    onDismiss(routeKey, removingRef.current);
  });
  //#endregion

  //#region effects
  useEffect(() => {
    if (removing === true && ref.current) {
      ref.current.close();
    }
  }, [removing]);
  //#endregion

  //#region renders
  const renderBackdropComponent = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        opacity={backdropOpacity}
        style={backdropStyle}
      />
    ),
    [backdropOpacity, backdropStyle]
  );

  return (
    <BottomSheetNavigatorContext.Provider value={contextVariables}>
      <BottomSheet
        ref={ref}
        index={index}
        snapPoints={snapPoints}
        detached={detached}
        overDragResistanceFactor={overDragResistanceFactor}
        enableOverDrag={enableOverDrag}
        enablePanDownToClose={enablePanDownToClose}
        enableContentPanningGesture={enableContentPanningGesture}
        enableHandlePanningGesture={enableHandlePanningGesture}
        // layout
        containerHeight={CONTAINER_HEIGHT}
        // gesture
        activeOffsetY={[-offsetY, offsetY]}
        // styles
        style={style}
        handleStyle={handleStyle}
        backgroundStyle={backgroundStyle}
        handleIndicatorStyle={handleIndicatorStyle}
        // components
        backdropComponent={
          backdropComponent === undefined
            ? renderBackdropComponent
            : backdropComponent
        }
        footerComponent={footerComponent}
        handleComponent={handleComponent}
        backgroundComponent={backgroundComponent}
        // callbacks
        onClose={handleOnClose}
      >
        {render()}
      </BottomSheet>
    </BottomSheetNavigatorContext.Provider>
  );
};

export default BottomSheetRoute;