export function SessionSwitcher({ isModalVisible, toggleModal } = {}) {
  const { currentSession = {}, appStore: { establishment } = {} } = store.visitorStore;

  let startPosition = Dimensions.get('window').height * 0.7;

  let [position] = React.useState(new Animated.ValueXY({ x: 0, y: startPosition }));
  let [panResponder] = React.useState(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        if (gesture.dy < 0) {
          return;
        }

        position.setValue({ y: gesture.dy, x: 0 });
      },
      onPanResponderEnd: (event, gesture) => {
        let y = 0;
        let hideModal = false;

        if (gesture.dy > Dimensions.get('window').height / 4) {
          y = Dimensions.get('window').height * 0.7;
          hideModal = true;
        }

        Animated.timing(position, {
          toValue: {
            y,
            x: 0,
          },
          duration: 300,
          useNativeDriver: false,
        }).start(() => {
          if (hideModal) {
            toggleModal(false);
          }
        });
      },
    })
  );

  let hideModal = React.useCallback(() => {
    Animated.timing(position, {
      toValue: {
        y: Dimensions.get('window').height * 0.7,
        x: 0,
      },
      duration: 300,
      useNativeDriver: false,
    }).start(() => {
      toggleModal(false);
    });
  }, [position]);

  React.useLayoutEffect(() => {
    if (!isModalVisible) {
      return;
    }

    Animated.spring(position, {
      toValue: {
        y: 0,
        x: 0,
      },
      useNativeDriver: false,
    }).start();
  }, [isModalVisible]);

  if (!isModalVisible) {
    return null;
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.overlay}
        onPress={() => {
          hideModal();
        }}
        activeOpacity={0}
      />
      <Animated.View style={[styles.content, position.getLayout()]} {...panResponder.panHandlers}>
        <SessionItem touchable={false} establishment={establishment} session={currentSession} />
        <SessionList />
      </Animated.View>
    </View>
  );
}