import { type FC } from 'react';
import Lottie from 'lottie-react-native';
import { Dimensions, type StyleProp, type TextStyle, View } from 'react-native';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';
import TTypography from '../TTypography/TTypography';
import { TypographyVariant } from '../TTypography/TTypographyEnum';
import { moderateScale } from 'react-native-size-matters';
import { defaultScale } from '../../utils/Common';

interface Prop {
  sourceUri: string;
  autoPlay?: boolean;
  loop?: boolean;
  backgroundColor?: string;
  theme: Theme;
  textStyle?: StyleProp<TextStyle>;
  title?: string;
}
const TAnimatedPreloader: FC<Prop> = ({
  sourceUri,
  autoPlay = true,
  loop = true,
  backgroundColor,
  textStyle,
  title,
}): any => {
  const { colors } = useTheme();
  const bgColor = backgroundColor ? backgroundColor : colors.backgroundLayout;
  const { width, height } = Dimensions.get('screen');
  return (
    <View
      style={{
        backgroundColor: bgColor,
        position: 'absolute',
        width: width,
        height: height,
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
      }}
    >
      <Lottie
        source={sourceUri}
        autoPlay={autoPlay}
        loop={loop}
        style={{
          width: moderateScale(124, defaultScale),
          height: moderateScale(124, defaultScale),
        }}
        testID={'waiting-state'}
      />
      <TTypography
        children={title}
        style={[
          {
            position: 'absolute',
            paddingTop: moderateScale(120, defaultScale),
            fontSize: moderateScale(16, defaultScale),
            color: colors.white,
          },
          textStyle,
        ]}
        variant={TypographyVariant.PRIMARY_BOLD}
      />
    </View>
  );
};

export default withTheme(TAnimatedPreloader);