import React, { useEffect, useRef } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import { Animated, View } from 'react-native';

import { ThemedStyleSheet, useTheme } from '../../branding';
import {
    PROGRESS_BAR_CONTAINER_WIDTH,
    PROGRESS_BAR_WIDTH,
    PROGRESS_BAR_HEIGHT,
    PROGRESS_BAR_BORDER_RADIUS,
    PROGRESS_BAR_OPACITY,
    PROGRESS_BAR_ANIMATION_DURATION
} from './constants';

interface ProgressBarProps {
    style?: StyleProp<ViewStyle>;
}

export const ProgressBar = ({ style }: ProgressBarProps) => {
    const { theme } = useTheme();
    const translateX = useRef(new Animated.Value(-PROGRESS_BAR_WIDTH)).current;

    useEffect(() => {
        translateX.setValue(-PROGRESS_BAR_WIDTH);

        const animation = Animated.loop(
            Animated.timing(translateX, {
                toValue: PROGRESS_BAR_CONTAINER_WIDTH,
                duration: PROGRESS_BAR_ANIMATION_DURATION,
                useNativeDriver: true
            })
        );

        animation.start();

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

    return (
        <View pointerEvents="none" style={[styles[theme].container, style]}>
            <Animated.View
                style={[styles[theme].bar, { transform: [{ translateX }] }]}
            />
        </View>
    );
};

const styles = ThemedStyleSheet.create(({ colors }) => ({
    container: {
        width: PROGRESS_BAR_CONTAINER_WIDTH,
        height: PROGRESS_BAR_HEIGHT,
        borderRadius: PROGRESS_BAR_BORDER_RADIUS,
        overflow: 'hidden' as const,
        opacity: PROGRESS_BAR_OPACITY,
        backgroundColor: colors.midnight800
    },
    bar: {
        width: PROGRESS_BAR_WIDTH,
        height: '100%' as const,
        borderRadius: PROGRESS_BAR_BORDER_RADIUS,
        backgroundColor: colors.midnight700
    }
}));

export default ProgressBar;