import React, { FC, useContext } from 'react';
import AnimatedLottieView from 'lottie-react-native';
import animation from '../Assets/DotAnimation.json';
import { ApplicationContext } from '../Context';
import { hexToRGBA } from './utils';
import { LoaderProps } from './types';

const DotLoader: FC<LoaderProps> = ({ color, style }) => {
  const { theme } = useContext(ApplicationContext);

  const arrayColor = [
    color ?? theme.colors.primary,
    theme.colors.background.surface,
    color ?? theme.colors.primary,
  ];

  let source: any = animation;
  source.assets[0].layers[0].shapes[0].it.forEach((item: any) => {
    if (item.ty === 'fl' && item.c) {
      item.c.k.forEach((fillItem: any, index: number) => {
        if (typeof fillItem !== 'number') {
          fillItem.s = hexToRGBA(arrayColor[index] as string);
        }
      });
    }
  });

  return (
    <AnimatedLottieView
      source={source}
      style={[{ width: 52, height: 18 }, style]}
      autoPlay
    />
  );
};

export default DotLoader;