import { ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Ionicons, AntDesign } from '@expo/vector-icons';

interface BackgroundDrinkInfoProps{
  EnableBackHandler: boolean;
  type: string,
  id: string,
  image_item: ImageProps,
  favourite: boolean,
  name: string,
  calories: string,
  average_rating: number,
  ratings_count: string,
  BackHandler?: any;
  ToggleFavorite: any
}


const BackgroundDrinkInfo:React.FC<BackgroundDrinkInfoProps> = ({
  EnableBackHandler,
  type,
  id,
  image_item,
  favourite,
  name,
  calories,
  average_rating,
  ratings_count,
  BackHandler,
  ToggleFavorite,
}) => {

  return (
    <View>
      <ImageBackground source={image_item} style={{width: '100%', aspectRatio: 20/25, justifyContent: 'space-between'}}>
        {EnableBackHandler ? (
          <View style={{padding:10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
              <Pressable onPress={() => {BackHandler()}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
                <Ionicons name="chevron-back" size={30} color="gray"/>
              </Pressable>
              <Pressable onPress={() => {ToggleFavorite(favourite, type, id);}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
                <AntDesign name="heart" size={24} color={favourite ? '#EF5A6F' : 'gray'} />
              </Pressable>
          </View>
        ) : (
          <View style={{padding:10, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end'}}>
              <Pressable onPress={() => {ToggleFavorite(favourite, type, id);}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
                <AntDesign name="heart" size={24} color={favourite ? '#EF5A6F' : 'gray'} />
              </Pressable>
          </View>
        )}
        <View style={{backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopRightRadius: 10, borderTopLeftRadius: 10}}>
          <View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>
            <Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{name}</Text>    
          </View>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, marginVertical: 10}}>
              <Text style={{color: '#DA7297', fontSize: 18}}>{calories} calories</Text>
              <View style={{flexDirection: 'row', gap: 3, alignItems: 'center'}}>
                <AntDesign name="star" size={20} color="#EF5A6F"/>
                <Text style={{color: '#DA7297', textAlign: 'right', fontSize: 18}}>{average_rating}</Text>
                <Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
              </View>
          </View>
        </View>
      </ImageBackground>
    </View>
  )
}

export default BackgroundDrinkInfo

const styles = StyleSheet.create({})