import type { FC, ReactNode } from 'react';
import React, { useEffect, useRef } from 'react';
import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import Header from './Header';
import Backdrop from './Backdrop';

interface BottomSheetDeprecatedProps {
    title: string | React.ReactElement;
    children: ReactNode;
    isVisible: boolean;
    onClose: () => void;
    titleAlign?: 'left' | 'center' | 'right';
    showCloseButton?: boolean;
    enableOverDrag?: boolean;
    enableDynamicSizing?: boolean;
    snapPoints?: (string | number)[];
    onReset?: () => void;
}

export const BottomSheetDeprecated: FC<BottomSheetDeprecatedProps> = ({
    title,
    children,
    isVisible,
    onClose,
    titleAlign = 'center',
    showCloseButton = true,
    enableOverDrag = true,
    enableDynamicSizing = true,
    snapPoints = [],
    onReset
}) => {
    const modalRef = useRef<BottomSheetModal>(null);
    const { theme } = useTheme();
    const styles = themedStyles[theme];

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

    const handleOnChange = (index: number) => {
        const isDismissed = index === -1;
        if (isDismissed) {
            onClose();
        }
    };

    return (
        <BottomSheetModal
            ref={modalRef}
            enableDynamicSizing={enableDynamicSizing}
            backdropComponent={Backdrop}
            onChange={handleOnChange}
            backgroundStyle={styles.bottomSheetBackground}
            handleStyle={styles.handle}
            handleIndicatorStyle={styles.indicator}
            enableOverDrag={enableOverDrag}
            snapPoints={snapPoints}
        >
            <BottomSheetView>
                <Header
                    title={title}
                    onBottomSheetClose={onClose}
                    titleAlign={titleAlign}
                    showCloseButton={showCloseButton}
                    onReset={onReset}
                />
                {children}
            </BottomSheetView>
        </BottomSheetModal>
    );
};

export default BottomSheetDeprecated;