import { Animated, StyleSheet } from 'react-native';
import { type HeaderAnimatedProps } from '../types';
import React from 'react';
import { Image } from '../../Image';
import { Colors } from '../../Consts';

/**
 * default header banner for header animated
 */
const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
  animatedValue,
  image,
  useScale = true,
  children,
}) => {
  const scale = useScale
    ? animatedValue.interpolate({
        inputRange: [-300, 0, 300],
        outputRange: [4, 1, 1],
        extrapolate: 'clamp',
      })
    : 1;
  const opacity = animatedValue.interpolate({
    inputRange: [0, 150, 300],
    outputRange: [1, 0.5, 0],
    extrapolate: 'clamp',
  });
  const translateY = animatedValue.interpolate({
    inputRange: [-300, 0],
    outputRange: [-80, -2],
    extrapolate: 'clamp',
  });

  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity: opacity,
          transform: [{ scale }, { translateY }],
        },
      ]}
    >
      {children ?? (
        <Image
          source={{
            uri: image,
          }}
          style={styles.full}
        />
      )}
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: { width: '100%', aspectRatio: 16 / 9 },
  verifiedDot: {
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: Colors.green_03,
    position: 'absolute',
    alignSelf: 'center',
  },
  full: { width: '100%', height: '100%' },
});

export { HeaderAnimated };