import React from 'react';
import { StackHeaderProps } from '@react-navigation/stack';
import { View, Image, Animated, StyleSheet } from 'react-native';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';
import Title from '../Title';

export const LONG_HEADER_HEIGHT = responsiveHeight(32);

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

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

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

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

  if (name === 'Welcome') {
    animation = { transform: [{ translateY: translationInOut }] };
  }

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

  return (
    <Animated.View style={[styles.container, animation]}>
      <View style={styles.content}>
        <View style={styles.bgContainer}>
          <Image
            resizeMethod="scale"
            resizeMode="cover"
            source={require('./header.png')}
            fadeDuration={0}
            style={styles.bgImage}
          />
          <View style={styles.logoContainer}>
            <Image
              resizeMethod="scale"
              resizeMode="cover"
              fadeDuration={0}
              source={require('./logo.png')}
              style={styles.logo}
            />
          </View>
          <Title text={title} />
        </View>
      </View>
    </Animated.View>
  );
});

const styles = StyleSheet.create({
  container: { backgroundColor: '#ffffff' },

  content: {
    elevation: 2,
    backgroundColor: colors.greyLighter,
    borderBottomLeftRadius: 40,
    borderBottomRightRadius: 40,
    height: LONG_HEADER_HEIGHT,
  },

  bgContainer: {
    marginVertical: responsiveHeight(2),
    height: responsiveHeight(16),
    alignItems: 'center',
  },

  bgImage: {
    width: '100%',
    height: '100%',
    aspectRatio: 3 / 1,
    marginLeft: 5,
  },

  logoContainer: {
    top: '-54%',
    height: 24,
    alignSelf: 'center',
  },

  logo: {
    tintColor: colors.white,
    width: '100%',
    height: '100%',
    aspectRatio: 1.1 / 1,
  },
});

export default LongHeader;