import React from 'react';
import { StackHeaderProps } from '@react-navigation/stack';
import { ImageBackground, StyleSheet, Animated } from 'react-native';
import { responsiveHeight } from 'react-native-responsive-dimensions';

export const SHORT_HEADER_HEIGHT = responsiveHeight(10.5);

const ShortHeader = React.memo((props: StackHeaderProps) => {
  let animation = {};
  const name = props.scene.route.name;
  const both = Animated.add(props.scene.progress.current, props.scene.progress.next || 0);

  const shortTranslationIn = both.interpolate({
    inputRange: [0.5, 1],
    outputRange: [-SHORT_HEADER_HEIGHT, 0],
    extrapolate: 'clamp',
  });

  const shortTranslationOut = both.interpolate({
    inputRange: [1, 1.5],
    outputRange: [0, -SHORT_HEADER_HEIGHT],
    extrapolate: 'clamp',
  });

  const opacity = both.interpolate({
    inputRange: [0, 1, 2],
    outputRange: [0, 1, 0],
  });

  if (name === 'Countries') {
    animation = { opacity, transform: [{ translateY: shortTranslationIn }] };
  }

  if (name === 'Institutions') {
    animation = { transform: [{ translateY: shortTranslationOut }] };
  }

  return (
    <Animated.View style={[styles.shortBgContainer, animation]}>
      <ImageBackground
        resizeMethod="scale"
        resizeMode="cover"
        source={require('./short-header.png')}
        fadeDuration={0}
        style={styles.shortBgImage}
      />
    </Animated.View>
  );
});

export const styles = StyleSheet.create({
  shortBgContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    height: SHORT_HEADER_HEIGHT,
  },

  shortBgImage: {
    width: '100%',
    height: '100%',
    aspectRatio: 5 / 1,
  },
});

export default ShortHeader;