workoutdietAlert

import React from "react";
import { Text, ScrollView, View, ImageBackground, StyleSheet, TouchableOpacity } from "react-native"
import { FlatList } from "react-native"
import Ionicons from 'react-native-vector-icons/Ionicons';

import { StatsIndicator } from "../common/StatsIndicator"
import ButtonComponent from "../common/ButtonComponent"

import WorkoutBgImage from '../../assets/Images/workout-popup-bg.png'
import BurnIconOutline from '../../assets/Icons/stats-burn/fire-outline.svg'
import ClockOutlineIcon from '../../assets/Icons/stats-burn/clock-outline.svg'
import fonts from "../../assets/fonts"
import { FoodItemCard } from "../common/FoodItemCard"
import { height, width } from "../../constants/constants"
import { colors } from "../../theme"
import { fontSize } from "../../utils/fontUtils";
import { IMAGE_URL } from "@env";

export const WorkoutDietAlert = ({ diet, dietData, data, onlyCard, hasVideo, onpress }) => {
    const renderFoodItems = ({ item }) => (
        <FoodItemCard
            imgUrl={item?.imgUrl}
            title={item?.title}
            calories={item?.calories}
            protein={item?.protein}
            serving={item?.serving}
        />)

    return (
        <ScrollView
            showsVerticalScrollIndicator={false}
            bounces={false}
            style={[styles.modalView, {
                backgroundColor: onlyCard
                    ? null : colors.white
            }]}>
            {!onlyCard &&
                <View style={{ alignItems: 'center' }}>
                    <Text style={styles.mainTitle}>It’s Workout Time!</Text>
                    <Text style={styles.description}>We’ve Prepared your today’s workout on your objectives</Text>
                </View>}

            <View style={{ width: '100%', }}>
                <View style={{ paddingHorizontal: 16 }}>
                    <ImageBackground
                        borderRadius={12}
                        style={styles.workoutBg}
                        source={data?.exercise_data?.template_video_for_gym?.thumbnail
                            ? {uri:IMAGE_URL + data?.exercise_data?.template_video_for_gym?.thumbnail}
                            : WorkoutBgImage}
                        resizeMode="contain">
                        {hasVideo &&
                            <View style={styles.playButtonContainer}>
                                <TouchableOpacity
                                    onPress={onpress}>
                                    <Ionicons
                                        size={width * .11}
                                        name="play-circle-outline"
                                        color={colors.white} />
                                </TouchableOpacity>
                            </View>}
                        {!onlyCard &&
                            <View style={styles.exerciseIndicator}>
                                <Text style={styles.indicatorText}>Core</Text>
                            </View>}
                        <View style={styles.workoutModalBottomContainer}>
                            <Text style={[styles.indicatorText, { color: colors.white }]}>Week {data?.week_no}/Day {data?.day}</Text>
                            <Text style={styles.exerciseTitle}>{data?.exercise_data?.template_video_for_gym?.name}</Text>
                            <StatsIndicator
                                // icon1={<BurnIconOutline />}
                                // stat1="255 Kcals"   commented due to calories in v2
                                icon2={<ClockOutlineIcon />}
                                stat2={data?.exercise_data?.template_video_for_gym?.duration ?? "0 Mins"}
                            />
                        </View>
                    </ImageBackground>
                </View>
                {diet && dietData &&
                    <FlatList
                        data={dietData}
                        renderItem={renderFoodItems}
                        keyExtractor={item => item?.id}
                        horizontal
                        showsHorizontalScrollIndicator={false}
                        pagingEnabled
                        style={{
                            marginVertical: 42,
                        }}
                    />
                }
                {!onlyCard &&
                    <View style={{ width: '100%' }} >
                        <ButtonComponent
                            title={"Let's Start your Workout"}
                            isActive />
                    </View>}
            </View>

        </ScrollView>
    )
}

const styles = StyleSheet.create({
    description: {
        fontSize: fontSize.fs14,
        fontFamily: fonts.PoppinsRegular,
        color: colors.c666666,
        textAlign: 'center',
        marginBottom: 18,
        width: '80%',
    },
    exerciseIndicator: {
        padding: 8,
        paddingHorizontal: 16,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.white,
        borderRadius: 20,
        marginLeft: 'auto',
        marginTop: 12,
        marginRight: 14,
    },
    exerciseTitle: {
        fontSize: fontSize.fs18,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.white,
        marginVertical: 6
    },
    fs18ppSb000: {
        fontSize: fontSize.fs18,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.black,
    },
    indicatorText: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsMedium,
        color: colors.mainBlack
    },
    mainTitle: {
        fontSize: fontSize.fs24,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.mainBlack,
        textAlign: 'center',
        marginVertical: 16,
    },
    modalView: {
        backgroundColor: colors.white,
        borderTopLeftRadius: 24,
        borderTopRightRadius: 24,
        padding: 0,
    },
    playButtonContainer: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    workoutModalBottomContainer: {
        marginTop: 'auto',
        marginLeft: 12,
        marginBottom: 10
    },
    workoutBg: {
        width: width * .88,
        height: height * .37,
        position: 'relative',
        alignSelf: 'center',
        padding: 16,
    },
})