import { View, Animated, Easing, StyleSheet } from 'react-native';
import React, { useEffect, useRef } from 'react';
import chatStore from "../../screens/chat/ChatStore";
const AnimatedSoundBars = _ref => {
  var _chatStore$soundBarsR;
  let {
    barColor = 'gray',
    isPlay,
    id
  } = _ref;
  const loopAnimation = node => {
    const keyframes = [1.2, 0.7, 1];
    const loop = Animated.sequence(keyframes.map(toValue => Animated.timing(node, {
      toValue,
      easing: Easing.ease,
      useNativeDriver: true
    })));
    return loop;
  };
  const loadAnimation = nodes => {
    if (isPlay) {
      Animated.loop(Animated.stagger(100, nodes.map(loopAnimation))).start();
    }
  };
  React.useEffect(() => {
    chatStore.soundBarsRefs[id] = Array.from({
      length: 16
    }).map(() => new Animated.Value(1));
    loadAnimation(chatStore.soundBarsRefs[id]);
  }, [isPlay]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.row
  }, (_chatStore$soundBarsR = chatStore.soundBarsRefs[id]) === null || _chatStore$soundBarsR === void 0 ? void 0 : _chatStore$soundBarsR.map((animation, index) => {
    return /*#__PURE__*/React.createElement(Animated.View, {
      key: `${index}`,
      style: [styles.bar, {
        backgroundColor: barColor
      }, {
        transform: [{
          scale: animation
        }]
      }]
    });
  }));
};
export default AnimatedSoundBars;
const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  bar: {
    height: 20,
    width: 4,
    borderRadius: 2,
    marginHorizontal: 2
  }
});
//# sourceMappingURL=index.js.map