import React, { useEffect, useRef } from 'react'
import { Animated, Dimensions, StyleSheet, View } from 'react-native'

type Props = {
  progress: number
  visible: boolean
}

const SCREEN_WIDTH = Dimensions.get('window').width

const GRADIENT_COLORS = ['#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#ec4899', '#f43f5e']

export default function XWebViewProgress({ progress, visible }: Props) {
  const animWidth = useRef(new Animated.Value(0)).current
  const animOpacity = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.timing(animOpacity, {
      toValue: visible ? 1 : 0,
      duration: visible ? 150 : 300,
      useNativeDriver: false,
    }).start()
  }, [visible, animOpacity])

  useEffect(() => {
    Animated.timing(animWidth, {
      toValue: Math.min(progress, 1) * SCREEN_WIDTH,
      duration: 200,
      useNativeDriver: false,
    }).start()
  }, [progress, animWidth])

  return (
    <Animated.View style={[styles.container, { opacity: animOpacity }]}>
      <Animated.View style={[styles.track, { width: animWidth }]}>
        <View style={styles.gradient}>
          {GRADIENT_COLORS.map(color => (
            <View key={color} style={[styles.segment, { backgroundColor: color }]} />
          ))}
        </View>
      </Animated.View>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  container: {
    height: 3,
    backgroundColor: '#e2e8f0',
    overflow: 'hidden',
  },
  track: {
    height: 3,
    overflow: 'hidden',
  },
  gradient: {
    flexDirection: 'row',
    width: SCREEN_WIDTH,
    height: 3,
  },
  segment: {
    flex: 1,
    height: 3,
  },
})
