import React from 'react';
import { StyleProp, View, ViewStyle } from 'react-native';

import { LoadingDot } from './LoadingDot';

import { useTheme } from '../../contexts/themeContext/ThemeContext';

type Props = {
  diameter?: number;
  duration?: number;
  numberOfDots?: number;
  spacing?: number;
  style?: StyleProp<ViewStyle>;
};

export const LoadingDots = (props: Props) => {
  const {
    theme: {
      loadingDots: { container, spacing },
    },
  } = useTheme();
  const {
    diameter = 5,
    duration = 1500,
    numberOfDots = 3,
    spacing: spacingProp = spacing,
    style,
  } = props;

  const halfSpacing = spacingProp ? spacingProp / 2 : spacing / 2;
  const offsetLength = duration / numberOfDots;

  return (
    <View
      accessibilityElementsHidden
      importantForAccessibility='no-hide-descendants'
      style={[{ flexDirection: 'row' }, container, style]}
    >
      {Array.from(Array(numberOfDots)).map((_item, index) => (
        <LoadingDot
          diameter={diameter}
          duration={duration}
          key={index}
          offset={duration - offsetLength * (index + 1)}
          style={
            index === 0
              ? { marginRight: halfSpacing }
              : index === numberOfDots - 1
                ? { marginLeft: halfSpacing }
                : { marginHorizontal: halfSpacing }
          }
        />
      ))}
    </View>
  );
};