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 TopSheet: React.FC<TopSheetProps> = ({
  isSheetOpen,
  closeSheet,
  top,
  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: top,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: Z_INDEX.dialogUnderLay,
            }}
          />
        </TouchableWithoutFeedback>
      </Visible>
      <MotiView
        animate={{
          top: top,
          opacity: 1,
          height: motiHeight,
        }}
        transition={{
          type: 'timing',
        }}
        from={{
          top: 0,
          height: 0,
          opacity: 0,
        }}
        style={{
          position: 'absolute',
          zIndex: Z_INDEX.dialog,
          overflow: 'hidden',
          top: 0,
          left: 0,
          right: 0,
        }}
      >
        <Container
          borderBottomEndRadius={STYLES.radius.card}
          borderBottomLeftRadius={STYLES.radius.card}
          backgroundColor="base"
          borderRightWidth={1}
          borderLeftWidth={1}
          borderBottomWidth={1}
          borderColor="divider-02"
          flexGrow={1}
        >
          {children}
        </Container>
      </MotiView>
    </>
  );
};

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