import React, {ReactNode, useCallback, useEffect, useMemo, useRef} from 'react';
import {StyleSheet} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {
  BottomSheetFooter,
  BottomSheetFooterProps,
  BottomSheetModal,
  BottomSheetModalProps,
} from '@gorhom/bottom-sheet';
import {MODAL_SPACING} from '@components/Modals/constants';
import {windowDimensions} from '@shared/constants';

import {Handle, HandleProps} from './HandleComponent';
import {BackDrop, BackDropProps} from './BackdropComponent';

export interface BottomModalRootProps {
  isVisible: boolean;
  onClose: () => void;
  children: ReactNode;
  enableDynamicSizing?: boolean;
  locked?: boolean;
  snapPoints?: (string | number)[];
  footerComponent?: ReactNode;
  fullScreen?: boolean;
  stackBehavior?: BottomSheetModalProps['stackBehavior'];
}

/**
 * @deprecated Use `_HuGo/Modals` instead
 */
export function BottomModalRoot({
  isVisible,
  children,
  onClose,
  snapPoints,
  footerComponent,
  fullScreen,
  enableDynamicSizing = true,
  locked = false,
  stackBehavior,
}: BottomModalRootProps) {
  const modalRef = useRef<BottomSheetModal>(null);
  const {top} = useSafeAreaInsets();
  const maxDynamicContentSize = windowDimensions.height - top;
  /**
   * This is required to avoid overlaps on the phone's StatusBar
   */
  const fullScreenSnapPoint = useMemo(
    () => [windowDimensions.height - top],
    [top],
  );

  const handleComponent = useCallback(
    (props: HandleProps) => <Handle {...props} />,
    [],
  );

  const backdropComponent = useCallback(
    (props: BackDropProps) => (
      <BackDrop
        {...props}
        onPress={locked ? undefined : onClose}
        pressBehavior={locked ? 'none' : 'close'}
      />
    ),
    [locked, onClose],
  );

  const bottomSheetfooterComponent = useCallback(
    (props: BottomSheetFooterProps) =>
      footerComponent ? (
        <BottomSheetFooter {...props}>{footerComponent}</BottomSheetFooter>
      ) : null,
    [footerComponent],
  );

  useEffect(() => {
    if (isVisible) {
      modalRef.current?.present();
    } else {
      modalRef.current?.close();
    }
  }, [isVisible]);

  return (
    <BottomSheetModal
      ref={modalRef}
      enableDynamicSizing={!fullScreen && !snapPoints && enableDynamicSizing}
      enablePanDownToClose={!locked}
      enableOverDrag={!locked}
      enableHandlePanningGesture={!locked}
      snapPoints={fullScreen ? fullScreenSnapPoint : snapPoints}
      maxDynamicContentSize={maxDynamicContentSize}
      handleComponent={locked ? null : handleComponent}
      backdropComponent={backdropComponent}
      onDismiss={locked ? undefined : onClose}
      footerComponent={bottomSheetfooterComponent}
      style={styles.modal}
      containerStyle={styles.modalContainer}
      stackBehavior={stackBehavior}>
      {children}
    </BottomSheetModal>
  );
}

const styles = StyleSheet.create({
  modal: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingVertical: MODAL_SPACING.modalPadding,
  },
  modalContainer: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
  },
});
