import React, { useEffect, useRef } from 'react'
import { View, Animated, StyleSheet } from 'react-native'
import appColors from '../../theme/appColors'
import { windowHeight } from '../../theme/appConstant'

export function ProgressBar({ onComplete }) {
  const progressAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.timing(progressAnim, {
      toValue: 1,
      duration: 30000,
      useNativeDriver: false,
    }).start(({ finished }) => {
      if (finished && onComplete) {
        onComplete()
      }
    })
  }, [])

  const widthInterpolated = progressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  })

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.progressBar, { width: widthInterpolated }]}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: windowHeight(0.7),
    backgroundColor: appColors.loader,
    overflow: 'hidden',
    alignSelf: 'center',
    borderBottomEndRadius: windowHeight(6),
    borderBottomRightRadius: windowHeight(8),
    borderColor: appColors.loader,
    borderBottomStartRadius: windowHeight(6),
  },
  progressBar: {
    height: '100%',
    backgroundColor: appColors.primary,
  },
})
