import React from 'react';
import {View} from 'react-native';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {LinearGradient} from 'expo-linear-gradient';
import Svg, {Circle, Defs, RadialGradient, Stop} from 'react-native-svg';
import Trophy from '@assets/prode/trophy.svg';

import Dot from './components/Dot';
import {
  DOT_DELAYS_MS,
  DOTS_FADE_DELAY_MS,
  PULSE_DURATION_MS,
} from './constants';
import {useFadeUp, usePulse} from './hooks';
import {
  GLOW_GRADIENT_STOPS,
  SPLASH_GRADIENT_COLORS,
  SPLASH_GRADIENT_LOCATIONS,
  TROPHY_DIMENSIONS,
  styles,
} from './styles';

function SportsPoolSplash() {
  const glowScale = usePulse({
    initial: 1,
    to: 1.1,
    duration: PULSE_DURATION_MS,
  });
  const glowOpacity = usePulse({
    initial: 0.55,
    to: 1,
    duration: PULSE_DURATION_MS,
  });
  const glowAnimatedStyle = useAnimatedStyle(() => ({
    opacity: glowOpacity.value,
    transform: [{scale: glowScale.value}],
  }));

  const trophyScale = usePulse({
    initial: 1,
    to: 1.04,
    duration: PULSE_DURATION_MS,
  });
  const trophyTranslateY = usePulse({
    initial: 0,
    to: -4,
    duration: PULSE_DURATION_MS,
  });
  const trophyAnimatedStyle = useAnimatedStyle(() => ({
    transform: [
      {scale: trophyScale.value},
      {translateY: trophyTranslateY.value},
    ],
  }));

  const dotsFadeStyle = useFadeUp(DOTS_FADE_DELAY_MS);

  return (
    <View style={styles.container} accessibilityRole="progressbar">
      <LinearGradient
        colors={SPLASH_GRADIENT_COLORS}
        locations={SPLASH_GRADIENT_LOCATIONS}
        style={styles.gradient}
      />
      <View style={styles.trophyContainer}>
        <Animated.View style={[styles.glow, glowAnimatedStyle]}>
          <Svg
            width={TROPHY_DIMENSIONS.glowSize}
            height={TROPHY_DIMENSIONS.glowSize}>
            <Defs>
              <RadialGradient
                id="splashGlow"
                cx="50%"
                cy="50%"
                rx="50%"
                ry="50%"
                fx="50%"
                fy="50%">
                {GLOW_GRADIENT_STOPS.map(({offset, color, opacity}) => (
                  <Stop
                    key={offset}
                    offset={offset}
                    stopColor={color}
                    stopOpacity={opacity}
                  />
                ))}
              </RadialGradient>
            </Defs>
            <Circle
              cx={TROPHY_DIMENSIONS.glowCenter}
              cy={TROPHY_DIMENSIONS.glowCenter}
              r={TROPHY_DIMENSIONS.glowCenter}
              fill="url(#splashGlow)"
            />
          </Svg>
        </Animated.View>
        <Animated.View style={trophyAnimatedStyle}>
          <Trophy
            width={TROPHY_DIMENSIONS.trophyWidth}
            height={TROPHY_DIMENSIONS.trophyHeight}
          />
        </Animated.View>
      </View>
      <View style={styles.textContainer}>
        <Animated.View style={[styles.dotsRow, dotsFadeStyle]}>
          {DOT_DELAYS_MS.map((delay, index) => (
            <Dot key={index} delay={delay} />
          ))}
        </Animated.View>
      </View>
    </View>
  );
}

export {SportsPoolSplash};