import { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    withRepeat,
    withTiming
} from 'react-native-reanimated';
import Svg, { Path, Rect } from 'react-native-svg';

const BatterySvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 20.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
            fill="#FAFAFA"
        />
    </Svg>
);

const RippleEffectBatteryIcon = () => {
    const scaleValue = useSharedValue(1);
    const opacityValue = useSharedValue(1);
    const textScaleValue = useSharedValue(0.4);

    const animatedCircle = useAnimatedStyle(() => {
        return {
            transform: [{ scale: scaleValue.value }],
            opacity: opacityValue.value
        };
    });

    const startRippleAnimation = () => {
        scaleValue.value = withRepeat(withTiming(3, { duration: 2000 }), -1);
        opacityValue.value = withRepeat(withTiming(0, { duration: 2000 }), -1);
        textScaleValue.value = withRepeat(
            withTiming(1, { duration: 10000 }),
            -1
        );
    };

    useEffect(() => {
        startRippleAnimation();
    }, []);

    return (
        <View className="relative">
            <View className="absolute">
                <BatterySvg></BatterySvg>
            </View>
            <View style={{ width: 40, height: 40 }}>
                <Animated.View
                    style={[animatedCircle, styles.innerCircle]}
                ></Animated.View>
            </View>
        </View>
    );
};

export default RippleEffectBatteryIcon;

const styles = StyleSheet.create({
    innerCircle: {
        width: '100%',
        height: '100%',
        borderRadius: 200,
        backgroundColor: '#025c72',
        justifyContent: 'center'
    },
    innerText: {
        fontSize: 14,
        alignSelf: 'center',
        fontWeight: 'bold',
        position: 'absolute',
        top: wp(10)
    }
});