import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';
import useAnimatedColor from '../hooks/useAnimatedColor';
import useAnimatedProgress from '../hooks/useAnimatedProgress';
import useOnLayout from '../hooks/useOnLayout';

type ProgressBarProps = {
  progress: number | 100;
  duration: number | 200;
  text?: string;
  color: string;
  onAnimationEnds?: (data: any) => void;
};

const ProgressBar = React.memo((props: ProgressBarProps) => {
  const { progress, duration, color, onAnimationEnds } = props;
  const [{ width }, onLayout] = useOnLayout();
  const grow = (width * progress) / 100;
  const translateX = useAnimatedProgress(grow, duration, onAnimationEnds);
  const backgroundColor: Animated.Node<any> = useAnimatedColor(color);

  return (
    <View style={styles.container} onLayout={onLayout}>
      <Animated.View style={[styles.progress, { backgroundColor, transform: [{ translateX }] }]} />
    </View>
  );
});

export default ProgressBar;

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#eee',
    height: 5,
    borderRadius: 2,
    position: 'relative',
    overflow: 'hidden',
  },
  progress: {
    height: 5,
    borderRadius: 2,
    position: 'absolute',
    width: '100%',
    top: 0,
    bottom: 0,
    left: '-100%',
  },
});