import LottieView from 'lottie-react-native';
import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';
import ProgressBar from 'screens/../../assets/lottie/Empty box.json';
import AppText from './AppText';

interface Props {
  message?: string;
  progress?: number;
}

const NoResult: React.FC<Props> = ({
  message = "Hech qanday ma'lumot topilmadi",
  progress = 0,
}) => {
  const { width } = useWindowDimensions();
  const { t } = useTranslation();
  const TOTAL_FRAMES = 90;
  const scale = width < 360 ? 0.8 : 1;
  const translateX = useRef(new Animated.Value(-width)).current;
  const progressBarRef = useRef<LottieView>(null);

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(translateX, {
          toValue: width / 2 + 75 * scale,
          duration: 6000,
          useNativeDriver: true,
        }),
        Animated.timing(translateX, {
          toValue: -width / 2 - 100 * scale,
          duration: 0,
          useNativeDriver: true,
        }),
      ]),
    ).start();
  }, [translateX, width, scale]);

  useEffect(() => {
    if (progressBarRef.current) {
      progressBarRef.current?.play(0, Math.floor(progress * TOTAL_FRAMES));
    }
  }, [progress]);

  return (
    <View style={styles.container}>
      <LottieView
        source={ProgressBar}
        loop
        autoPlay={true}
        resizeMode="cover"
        style={{ width: 250 * scale, height: 250 * scale }}
      />
      <AppText>{t(message)}</AppText>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
});

export default NoResult;
