trackerCard

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import WaterIntakeIcon from '../../assets/Icons/stats-burn/glass-of-water.svg'
import fonts from "../../assets/fonts";
import { colors } from "../../theme";
import { width } from "../../constants/constants";
import { SvgUri } from "react-native-svg";
import { useDispatch } from "react-redux";
import { getStats, setDailyWaterIntake } from "../../api";
import { storeStatsData } from "../../redux/actions/stats";
import moment from "moment";

interface TrackerCardPropTypes {
    title: string;
    icon: JSX.Element;
    caloriesBurnt: number | string;
    onTrack: (title: string) => void;

    otherTrackerCard: boolean;
    date: string;
    magnitude: string|number|undefined;
    unit: string|undefined;
    isWaterIntake: boolean |undefined;
    trackerProgressTitle: string|undefined;
    trackerProgress: string|undefined;
    progressStatus: string|undefined;
    statusText: string|undefined;
    distance?: number;
    duration?: number;
    currentDate?:string;
    onUpdate?:()=>void;
}

export const TrackerCard:React.FC<TrackerCardPropTypes> = ({
    title,
    icon,
    caloriesBurnt,
    onTrack,
    otherTrackerCard,
    date,
    magnitude,
    distance,
    duration,
    unit,
    isWaterIntake,
    trackerProgressTitle,
    trackerProgress,
    progressStatus,
    statusText,
    currentDate,
    onUpdate
}) => {
    const dispatch = useDispatch()
    const [numberOfGlass, setNumberOfGlass] = useState(0)

    const getStatsData = (date:string) => {
        let params = {
            current_date: date
        }
        getStats(params).then(val => {
            dispatch(storeStatsData(val.data.data))
        }).catch(err => console.log(err))
    }

    useEffect(() => {
        const dataObj = {
            number_of_glass: numberOfGlass
        }
        setDailyWaterIntake(dataObj).then(val => {
            if(val?.data) {
                getStatsData(currentDate??moment().format('YYYY-MM-DD'))
                onUpdate()
            }
        })
    }, [numberOfGlass])

    const handleAddGlass = () => {
        setNumberOfGlass(prev => prev + 1)
    }
    const handleSubtractGlass = () => {
        setNumberOfGlass(prev => prev - 1)
    }

    return (
        <View style={otherTrackerCard ? styles.otherCard : styles.trackingCardContainer}>
            <View style={styles.rowCenterApart}>
                <Text style={styles.trackingCardTitle}>{title}</Text>
                <View style={styles.trackingIconStyles}>
                    {typeof(icon)==='string'?
                    <SvgUri
                        uri={icon}
                    />
                    :icon}
                </View>
            </View>

            {otherTrackerCard ?
                <>
                    {date &&
                        <Text style={{ ...styles.caloriesText, color: colors.c999999, marginVertical: 8 }}>{date}</Text>}
                    {magnitude &&
                        <View style={{ ...styles.rowCenter, marginVertical: 6 }}>
                            <Text style={styles.calorieCount}>{magnitude}</Text>
                            <Text style={styles.regularText}> /{unit}</Text>
                        </View>}
                    {(trackerProgressTitle && trackerProgress && progressStatus) &&
                        <View style={{ ...styles.rowCenter, marginBottom: 4 }}>
                            <Text style={styles.fs12ppMed999}>{trackerProgressTitle} : <Text style={
                                progressStatus === 'good' ?
                                    styles.fs14ppBldGreen :
                                    progressStatus === 'average' ?
                                        { ...styles.fs14ppBldGreen, color: colors.green }
                                        : { ...styles.fs14ppBldGreen, color: colors.cEC6E6E }
                            }>{trackerProgress}</Text></Text>

                        </View>}
                    {progressStatus &&
                        <View style={styles.statusContainer}>
                            <Text style={styles.fs10ppRegGreen}>{statusText}</Text>
                        </View>
                    }
                </>
                :
                <>
                    <Text style={{ ...styles.caloriesText, marginVertical: 6 }}>Calories Burnt</Text>
                    <View style={{ ...styles.rowCenter, marginVertical: 8 }}>
                        <Text style={styles.calorieCount}>{caloriesBurnt}</Text>
                        <Text style={styles.regularText}>/Kcal</Text>
                    </View>
                    <View style={styles.rowCenterApart}>
                        <View>
                            <Text style={styles.regularText}>Distance</Text>
                            <Text style={styles.distanceValueStyles}>{distance} <Text style={styles.distanceUnitStyles}>Miles</Text></Text>
                        </View>
                        <View>
                            <Text style={styles.regularText}>Time</Text>
                            <Text style={styles.distanceValueStyles}>{duration} <Text style={styles.distanceUnitStyles}>Min</Text></Text>
                        </View>
                    </View>
                    <TouchableOpacity onPress={() => onTrack(title)} style={styles.trackButtonContainer}>
                        <Text style={styles.trackButtonText}>Track</Text>
                    </TouchableOpacity>

                </>}

            {isWaterIntake &&
                <View style={{ ...styles.rowCenterApart, marginTop: 'auto', alignSelf: 'center' }}>
                    <TouchableOpacity 
                        style={styles.incrementDecrementButton}
                        onPress={handleSubtractGlass}>
                        <Text style={styles.incrementDecrementText}>-</Text>
                    </TouchableOpacity>
                    <WaterIntakeIcon />
                    <TouchableOpacity 
                        style={styles.incrementDecrementButton}
                        onPress={handleAddGlass}>
                        <Text style={styles.incrementDecrementText}>+</Text>
                    </TouchableOpacity>
                </View>}


        </View>
    )
}

const styles = StyleSheet.create({
    calorieCount: {
        fontFamily: fonts.PoppinsBlack,
        color: colors.mainBlack,
        fontSize: 20,
        fontWeight: '700',
        marginBottom: 4
    },
    caloriesText: {
        fontFamily: fonts.PoppinsMedium,
        fontSize: 10,
        fontWeight: '500',
        color: colors.c666666,
    },
    distanceUnitStyles: {
        fontSize: 10,
        fontWeight: '600',
        color: colors.c666666,
        fontFamily: fonts.PoppinsBold,
    },
    distanceValueStyles: {
        fontSize: 12,
        fontWeight: '600',
        fontFamily: fonts.PoppinsBold,
        color: colors.green,
    },
    fs10ppRegGreen: {
        fontSize: 10,
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '400',
        color: colors.green,
    },
    fs12ppMed999: {
        fontSize: 12,
        fontFamily: fonts.PoppinsMedium,
        fontWeight: '500',
        color: colors.c999999
    },
    fs14ppBldGreen: {
        fontSize: 14,
        fontFamily: fonts.PoppinsBold,
        fontWeight: '700',
        color: colors.green,
    },
    incrementDecrementButton: {
        padding: 4,
        paddingHorizontal: 16,
        backgroundColor: colors.purple,
        borderRadius: 45,
    },
    incrementDecrementText: {
        fontSize: 12,
        fontFamily: fonts.PoppinsRegular,
        color: colors.white,
    },
    otherCard: {
        backgroundColor: colors.white,
        borderRadius: 12,
        borderWidth: 1,
        borderColor: colors.cE8E8E8,
        padding: 16,
        flex: 1,
        margin: 4,
        width: '100%',
        minHeight: width / 1.75
    },
    regularText: {
        fontFamily: fonts.PoppinsMedium,
        fontSize: 12,
        fontWeight: '500',
        color: colors.c999999,
    },
    rowCenter: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    rowCenterApart: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    statusContainer: {
        width: '100%',
        padding: 8,
        backgroundColor: colors.lightGreenBg,
        borderRadius: 40,
        marginTop: 'auto',
        alignItems: 'center'
    },
    trackingCardContainer: {
        backgroundColor: colors.cf9f9f9,
        padding: 16,
        borderRadius: 12,
        flex: 1,
        margin: 4,
        width: '100%',
        minHeight: width / 1.75
    },
    trackingCardTitle: {
        fontSize: 14,
        fontWeight: '600',
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.mainBlack,
        textTransform: 'capitalize'
    },
    trackingIconStyles: {
        padding: 6,
        aspectRatio: 1,
        borderRadius: 50,
        backgroundColor: colors.white,
    },
    trackButtonContainer: {
        backgroundColor: colors.black,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 40,
        padding: 6,
        marginTop: 'auto',
        marginBottom: 8,
        width: '100%',
    },
    trackButtonText: {
        fontFamily: fonts.PoppinsRegular,
        fontSize: 10,
        fontWeight: '400',
        color: colors.cf9f9f9
    },
})