import React from "react"
import { View, Animated, Easing } from "react-native"
import PropTypes from "prop-types"

export class BubbleLoader extends React.Component {
  static propTypes = {
    size: PropTypes.number,
  }

  static defaultProps = {
    size: 50,
  }

  constructor(props) {
    super(props)
    this.animatedScales = [0, 1, 2].map((i) => new Animated.Value(1.0))

    Animated.loop(
      Animated.parallel(
        this.animatedScales.map((value, i) =>
          Animated.sequence([
            Animated.timing(value, {
              toValue: 0.2,
              duration: 800,
              delay: 200 * i,
              easing: Easing.out(Easing.sin),
              useNativeDriver: true,
            }),
            Animated.timing(value, {
              toValue: 1.0,
              duration: 800,
              easing: Easing.out(Easing.sin),
              useNativeDriver: true,
            }),
            Animated.delay(200 * (2 - i)),
          ])
        )
      )
    ).start()
  }

  render() {
    const { size } = this.props
    const spacing = size / 5

    return (
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          height: size,
          width: size * 3 + spacing * 2,
        }}>
        {[0, 1, 2].map((i) => (
          <Animated.View
            key={i}
            style={{
              width: size,
              height: size,
              backgroundColor: "#dddddd",
              borderWidth: 0,
              borderRadius: size / 2,
              transform: [
                {
                  scaleX: this.animatedScales[i],
                },
                {
                  scaleY: this.animatedScales[i],
                },
              ],
            }}
          />
        ))}
      </View>
    )
  }
}