import {
    useEffect,
    useRef
} from "react";
import {
    Animated,
    Easing,
    View
} from "react-native";
import {
    NCoreUIKitTheme
} from "../../../core/hooks";
import {
    type INCoreUIKitIconProps
} from "../../../types";
import {
    Path,
    Svg
} from "react-native-svg";

const SvgLoadingIcon = ({
    color = "emphasized",
    customColor,
    size = 22,
    ...props
}: INCoreUIKitIconProps & {
    className?: string;
}) => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    const animValue = useRef(new Animated.Value(0)).current;

    const pathScale = 38 / size;

    useEffect(() => {
        const animation = Animated.loop(
            Animated.timing(animValue, {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear,
                useNativeDriver: true
            })
        );

        animation.start();

        return () => animation.stop();
    }, [animValue]);

    const rotate = animValue.interpolate({
        inputRange: [
            0,
            1
        ],
        outputRange: [
            "0deg",
            "-360deg"
        ]
    });

    return (
        <View
            style={{
                height: size,
                width: size
            }}
        >
            <Animated.View
                style={{
                    transform: [{
                        rotate: rotate
                    }]
                }}
            >
                <Svg
                    height={size}
                    width={size}
                    fill="none"
                    style={props.style}
                    {...props}
                >
                    <Path
                        d="M11.885 7.303 19 3.194l7.115 4.109v8.215l7.095 4.09v8.215l-7.115 4.108-7.076-4.108-7.114 4.108-7.115-4.108v-8.216l7.095-4.089V7.303Z"
                        stroke={customColor ? customColor : colors.content.icon[color]}
                        transform={`scale(${1 / pathScale})`}
                        strokeLinejoin="round"
                        strokeLinecap="round"
                        clipRule="evenodd"
                        strokeWidth={3}
                    />
                </Svg>
            </Animated.View>
        </View>
    );
};
export default SvgLoadingIcon;
