import React, { FC, ReactNode } from 'react';
import {
  Dimensions,
  DimensionValue,
  Platform,
  StatusBar,
  View
} from 'react-native';
import ReactModal from 'react-native-modal';
import { ModalHeader } from './ModalHeader/modal-header';
import { styles } from './style';

type Props = {
  children: ReactNode;
  visible: boolean;
  onRequestClose?: () => void;
  visibleInPercent?: DimensionValue;
  headerTitle: string;
};

export const Modal: FC<Props> = ({
  children,
  onRequestClose,
  visible,
  visibleInPercent,
  headerTitle
}) => {
  const screenHeight = Dimensions.get('screen').height;
  const NOTCH_HEIGHT = 44;
  const statusBarHeight =
    Platform.OS === 'ios' ? StatusBar.currentHeight || NOTCH_HEIGHT : StatusBar.currentHeight || 0;
  const adjustedHeight = screenHeight - statusBarHeight;

  return (
    <ReactModal
      isVisible={visible}
      onBackdropPress={onRequestClose}
      onBackButtonPress={onRequestClose}
      style={styles.modal}
      statusBarTranslucent={true}
      presentationStyle="overFullScreen"
    >
      <View style={[styles.wrapper, { height: visibleInPercent ?? adjustedHeight }]}>
        <ModalHeader onRequestClose={onRequestClose} textHeader={headerTitle} />
        <Drawer />
        {children}
      </View>
    </ReactModal>
  );
};

const Drawer = () => {
  return <View style={styles.drawer} />;
};