import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';
import { AntDesign } from '@expo/vector-icons';

// @ts-ignore
export default function NextButton({ percentage, scrollTo }) {
    const size = 128;
    const strokeWidth = 2;
    const center = size / 2;
    const radius = size / 2 - strokeWidth / 2;
    const circumFerence = 2 * Math.PI * radius;

    const progressAnimation = useRef(new Animated.Value(0)).current;
    const progressRef = useRef(null);
    // @ts-ignore
    const animation = (toValue) => {
        return Animated.timing(progressAnimation, {
            toValue,
            duration: 250,
            useNativeDriver: true
        }).start()
    }

    useEffect(() => {
        animation(percentage);
    }, [percentage]);

    useEffect(() => {
        progressAnimation.addListener(
            (value) => {
                const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;

                if (progressRef?.current) {
                    // @ts-ignore
                    progressRef.current.setNativeProps({
                        strokeDashoffset,
                    });
                }

            }, 
            // @ts-ignore
            [percentage]

        );

        return () => {
            progressAnimation.removeAllListeners();
        };

    }, []);

    return (
        <View style={styles.container}>
            <Svg width={size} height={size}>
                <G rotation="-90" origin={center}>
                    <Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
                    <Circle
                        ref={progressRef}
                        stroke="#b50909"
                        fill="#141414"
                        cx={center}
                        cy={center}
                        r={radius}
                        strokeWidth={strokeWidth}
                        strokeDasharray={circumFerence}
                    />
                </G>
            </Svg>
            <TouchableOpacity onPress={scrollTo} style={styles.button} activeOpacity={0.6}>
                <AntDesign name="arrowright" size={32} color="#fff" />
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    button: {
        position: 'absolute',
        backgroundColor: '#b50909',
        borderRadius: 100,
        padding: 20
    }
})
