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,
  },
})