import React, {useContext} from 'react';
import {Image, StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';
import {IMAGE_WIDTH, COVER_HEIGHT, IMAGE_HEIGHT} from '../../constants';
import {useSelector, useStore} from 'react-redux';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
import {DUMMY_USERID, NO_USER_DATA} from '../../store/initialStates';

const {interpolate, Extrapolate} = Animated;
interface CoverProps {
  y: Animated.Value<number>;
  userXId: string;
  screenType: ScreenType;
}
const Cover: React.FC<CoverProps> = ({y, userXId, screenType}) => {
  const {cover = ''} = userXId
    ? useSelector((state: RootState) => state.userX[screenType][userXId])
    : useSelector((state: RootState) => state.user);

  const scale: Animated.Node<number> = interpolate(y, {
    inputRange: [-COVER_HEIGHT, 0],
    outputRange: [1.5, 1.25],
    extrapolateRight: Extrapolate.CLAMP,
  });
  return (
    <Animated.View style={[styles.container, {transform: [{scale}]}]}>
      <Image
        style={styles.image}
        source={
          cover
            ? {uri: cover}
            : require('../../assets/images/cover-placeholder.png')
        }
      />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
  },
  image: {
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT,
  },
});
export default Cover;