import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet } from 'react-native';
import { useTheme } from 'react-native-paper';
import { useDeviceOrientation } from '@react-native-community/hooks';

const hideableHeaderStyles = StyleSheet.create({
  headerView: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
    paddingHorizontal: '4%',
  },
  headerViewPortrait: {
    paddingTop: '4%',
  },
  headerViewLandscape: {
    paddingTop: '2%',
  },
});

const HideableHeader = ({
  visible = true,
  children,
}: {
  visible?: boolean;
  children: React.ReactNode;
}) => {
  const { colors } = useTheme();
  const orientation = useDeviceOrientation();

  const headerAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;

  useEffect(() => {
    Animated.timing(headerAnim, {
      toValue: visible ? 1 : 0,
      duration: visible ? 200 : 150,
      useNativeDriver: true,
    }).start();
  }, [headerAnim, visible]);

  return (
    <Animated.View
      style={[
        hideableHeaderStyles.headerView,
        orientation === 'portrait'
          ? hideableHeaderStyles.headerViewPortrait
          : hideableHeaderStyles.headerViewLandscape,
        {
          transform: [
            {
              translateY: headerAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [-130, 0],
              }),
            },
          ],
        },
        {
          backgroundColor: colors.background,
        },
      ]}>
      {children}
    </Animated.View>
  );
};

export default HideableHeader;