"use strict";

import React, { useEffect, useRef } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';

// Define props
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Composing component
const Composing = ({
  usersTyping = ['User'],
  style
}) => {
  const fadeAnim1 = useRef(new Animated.Value(0.2)).current;
  const fadeAnim2 = useRef(new Animated.Value(0.2)).current;
  const fadeAnim3 = useRef(new Animated.Value(0.2)).current;
  const animateDot = (animatedValue, delay) => {
    Animated.loop(Animated.sequence([Animated.timing(animatedValue, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
      delay
    }), Animated.timing(animatedValue, {
      toValue: 0.2,
      duration: 300,
      useNativeDriver: true
    })])).start();
  };
  useEffect(() => {
    animateDot(fadeAnim1, 0);
    animateDot(fadeAnim2, 200);
    animateDot(fadeAnim3, 400);
  }, []);
  let typingText;
  if (usersTyping.length === 1) {
    typingText = `${usersTyping[0]} is typing`;
  } else if (usersTyping.length === 2) {
    typingText = `${usersTyping[0]} and ${usersTyping[1]} are typing`;
  } else if (usersTyping.length > 2) {
    typingText = `${usersTyping.length} people are typing`;
  } else {
    typingText = '';
  }
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.wrapper, style],
    children: [typingText ? /*#__PURE__*/_jsx(Text, {
      style: styles.typingText,
      children: typingText
    }) : /*#__PURE__*/_jsx(View, {}), /*#__PURE__*/_jsxs(View, {
      style: styles.dotsContainer,
      children: [/*#__PURE__*/_jsx(Animated.Text, {
        style: [styles.dot, {
          opacity: fadeAnim1
        }],
        children: "."
      }), /*#__PURE__*/_jsx(Animated.Text, {
        style: [styles.dot, {
          opacity: fadeAnim2
        }],
        children: "."
      }), /*#__PURE__*/_jsx(Animated.Text, {
        style: [styles.dot, {
          opacity: fadeAnim3
        }],
        children: "."
      })]
    })]
  });
};
const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 4
  },
  typingText: {
    marginRight: 4,
    fontSize: 12,
    color: '#71717A',
    fontStyle: 'italic'
  },
  dotsContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  dot: {
    fontSize: 18,
    lineHeight: 18,
    marginHorizontal: 1,
    color: '#71717A'
  }
});
export default Composing;
//# sourceMappingURL=Composing.js.map