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

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

  let source: any = animation;
  source.assets[0].layers.forEach((layer: any) => {
    layer.shapes[0].it.forEach((item: any) => {
      if (item.ty === 'fl' && item.c) {
        item.c.k = hexToRGBA(color ?? theme.colors.primary);
      }
    });
  });

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

export default Spinner;