import { Container, TouchableWithoutFeedback } from 'components/layout';
import { Visible } from 'components/visible';
import { metrics } from 'config';
import { COLOR_VALUES } from 'theme/color';
import { MotiView } from 'moti';

const { Z_INDEX, STYLES } = metrics;

export const BottomSheet: React.FC<BottomSheetProps> = ({
  isSheetOpen,
  closeSheet,
  height,
  children,
}) => {
  const motiHeight = isSheetOpen ? height : 0;

  return (
    <>
      <Visible if={isSheetOpen}>
        <TouchableWithoutFeedback onPress={closeSheet}>
          <Container
            style={{
              position: 'absolute',
              backgroundColor: COLOR_VALUES['underlay-dark-05'],
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: Z_INDEX.dialogUnderLay,
            }}
          />
        </TouchableWithoutFeedback>
      </Visible>
      <MotiView
        animate={{
          opacity: 1,
          height: motiHeight,
        }}
        from={{
          height: 0,
          opacity: 0,
        }}
        transition={{
          type: 'timing',
        }}
        style={{
          position: 'absolute',
          zIndex: Z_INDEX.dialog,
          bottom: 0,
          left: 0,
          right: 0,
        }}
      >
        <Container borderRadius={STYLES.radius.card} backgroundColor="base" flexGrow={1}>
          {children}
        </Container>
      </MotiView>
    </>
  );
};

export interface BottomSheetProps {
  isSheetOpen: boolean;
  height: number;
  closeSheet: () => void;
  children: JSX.Element;
}