import React from 'react';
import { View,Animated } from 'react-native';
import Styled from 'styled-components/native';
import Theme from '~/Themes';
import Icon from '~/Components/UIControls/Icon';
import { ActivityIndicator } from 'react-native';
import { LinearGradient} from "expo-linear-gradient";

const Container = Styled.View`
    padding: 3px;
    align-self: auto;
`;

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

const GradientGraph = ({percent=0,width=300,maxValue=0,value=0,height=13,borderRadius=14}) => {

    //console.log(value / maxValue * 100);

    var graphWidth = 0;
    
    if(maxValue !== 0 && value !== 0){
        maxValue = maxValue * 1.1;
        percent = value / maxValue * 100
    }
    
    if(value === 0){
        percent = 0;
    }

    graphWidth = width / 100 * percent;


    return (
        <Container>
        <View style={{height:height,width:width,backgroundColor:"#dedede",borderRadius: borderRadius}}>
            <AnimatedLinearGradient
                start={{x: 0.0, y: 0}} end={{x: 1, y: 0}}
                locations={[0,1]}
                colors={['#40b9ff', '#bbec57']}
                style={{ height:height,width:graphWidth,alignItems:"flex-end",borderRadius: borderRadius}} >
            </AnimatedLinearGradient>
        </View>

        </Container>
    );
};

export default GradientGraph;