import { times } from 'lodash';
import React, { useState, useEffect } from 'react';
import { Animated, Dimensions, Easing, StyleSheet, View } from 'react-native';

const Pulse = ({ opacity, size, startSize }) => {
  const scale = Animated.divide(size, startSize);
  const position = startSize / -2;

  return (
    <Animated.View
      style={[
        styles.pulse,
        {
          borderRadius: size,
          height: startSize,
          left: position,
          opacity,
          scaleX: scale,
          scaleY: scale,
          top: position,
          width: startSize
        }
      ]}
    />
  );
};

const arrayBuilder = size => iteratee => times(size, iteratee);

const expandAnimator = (duration, endSize, endOpacity) => (size, opacity) => {
  const options = {
    duration,
    useNativeDriver: true
  };

  return Animated.parallel([
    Animated.timing(size, { ...options, toValue: endSize }),
    Animated.timing(opacity, { ...options, toValue: endOpacity })
  ]);
};

export const Pulsar = ({
  count = 4,
  startSize = 86,
  endSize = Dimensions.get('window').width,
  startOpacity = 1,
  endOpacity = 0,
  duration = 2750,
  interval = 600,
  delay = 2400
}) => {
  const countOf = arrayBuilder(count);
  const [sizes] = useState(countOf(() => new Animated.Value(startSize)));
  const [opacities] = useState(countOf(() => new Animated.Value(startOpacity)));

  useEffect(() => {
    const animateExpand = expandAnimator(duration, endSize, endOpacity);
    const expansions = countOf(i => animateExpand(sizes[i], opacities[i]));

    Animated.loop(
      Animated.sequence([
        Animated.stagger(interval, expansions),
        Animated.delay(delay)
      ])
    ).start();
  }, []);

  return (
    <View>
      {countOf(i => (
        <Pulse
          key={i}
          opacity={opacities[i]}
          size={sizes[i]}
          startSize={startSize}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  pulse: {
    backgroundColor: '#F00',
    position: 'absolute'
  }
});