import {FC, useEffect, useState} from "react";
import {StyleSheet, View, Image} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import * as Animatable from 'react-native-animatable';
import DText from "../DText/DText";
import {useSelector} from "react-redux";
import {RootState, useAppDispatch} from "../../redux/store";
import {hideReward} from "../../features/animations/animationsSlice";

// const width = responsiveWidth(20)
const AnimationsView: FC = () => {
    const dispatch = useAppDispatch();
    const state = useSelector((state: RootState) => state.animations);
    const [currentAnimation, setCurrentAnimation] = useState('bounceInRight');
    const [animationStage, setAnimationStage] = useState('in'); // Управляет текущей стадией анимации

    useEffect(() => {
        // После завершения анимации входа, начинаем анимацию выхода
        if (animationStage === 'out') {
            setCurrentAnimation('bounceOutRight');
        }
    }, [animationStage]);

    const onAnimationEnd = () => {
        if (animationStage === 'in') {
            // После завершения анимации входа, переходим к анимации выхода
            setAnimationStage('out');
        } else if (animationStage === "out") {
            dispatch(hideReward());
        }
    };

    const startAnimation = () => {
        setCurrentAnimation("bounceInRight");
        setAnimationStage('in');
    }

    useEffect(() => {
        if (state.isRewardAnimationVisible)
            startAnimation();

    }, [state.isRewardAnimationVisible]);

    return (
        <View style={{...style.container, display: state.isRewardAnimationVisible ? "flex" : "none"}}>
            <Animatable.View
                style={{
                    backgroundColor: "white",
                    borderRadius: responsiveWidth(3),
                    // width: width,
                    paddingHorizontal: responsiveWidth(2),
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    gap: responsiveWidth(1),
                    zIndex: 1,
                    elevation: 10,
                    justifyContent: "center"
                }}
                animation={currentAnimation}
                duration={1000} // Продолжительность анимации
                easing="ease-in-out" // Тип анимации
                iterationCount={1} // Бесконечное повторение
                onAnimationEnd={onAnimationEnd}
            >
                <View style={{
                    height: responsiveHeight(5)
                }}>
                    <Image
                        style={{
                            height: responsiveHeight(5),
                            width:responsiveWidth(5),
                            resizeMode: "contain"
                        }}
                        source={require('assets/icons/reward.png')}/>
                </View>
                <DText>+{state.rewardAmount.toLocaleString('ru-RU')}₽</DText>

            </Animatable.View>
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        position: "absolute",
        right: 0,
        top: 0,
        marginTop: responsiveHeight(10),

    }
})
export default AnimationsView;