import React, { forwardRef, useEffect, useReducer, useState } from "react";
import {
  Animated,
  Easing,
  StyleSheet,
  View,
  Image,
  Dimensions,
} from "react-native";
import Colors from "../common/Colors";
import {
  ANIM_DURATION,
  ANIMATION_TRACK,
  zIndex_moving_thumbnail,
} from "./StencilAnimation";
// const pi_pose_strip = require("../../images/pi_pose_strip.png");
const pi_pose_strip = {
  uri: "https://d2h44aw7l5xdvz.cloudfront.net/CRM/PRM/car_angles-01.png",
};

const AnimationEaseLinear = forwardRef((props, animatedRef) => {
  const animFirst = new Animated.Value(0);
  const { animationListener, newAnimatedRef } = props;

  useEffect(() => {
    animatedRef.current = [
      Animated.timing(animFirst, {
        toValue: ANIMATION_TRACK,
        duration: ANIM_DURATION,
        useNativeDriver: true,
        easing: Easing.linear,
      }),
    ];

    animFirst.addListener(({ value }) => {
      if (animationListener) {
        animationListener(animFirst, value);
      }
    });
    console.log("**** useEffect animatedRef assigned");
  });

  return (
    <View style={styles.mainView}>
      <Image
        style={styles.poseImage}
        source={pi_pose_strip}
        resizeMode="stretch"
      />
      <Animated.View
        style={[styles.animView, { transform: [{ translateX: animFirst }] }]}
      />
    </View>
  );
});

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    height: "100%",
    zIndex: zIndex_moving_thumbnail,
    marginTop: 0,
    width: "100%",
    position: "absolute",
    justifyContent: "flex-start",
    backgroundColor: "transparent",
  },
  animView: {
    height: "15%",
    borderWidth: 2,
    borderColor: Colors.digitYellow,
    borderRadius: 5,
    width: "10%",
    backgroundColor: "transparent",
    position: "absolute",
  },
  stencilStyle: {
    width: "100%",
    height: "100%",
  },
  poseImage: {
    width: "100%",
    height: "15%",
    backgroundColor: "white",
  },
});

export default AnimationEaseLinear;
