import React, {useContext, useState} from 'react';
import {View, Text, Image, Button, StyleSheet, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {CartContext} from '../../store/CartContext';
import { Colors } from '../../constants/Constants';


const ProductDetail = porps => {
  const item = porps.route.params.item;
  const [quantity, setQuantity] = useState(1);
  const navigation = useNavigation();
  const {addToCart} = useContext(CartContext);

  console.log(item);

  const handleBuyNow = () => {
    addToCart({...item, quantity});
    navigation.navigate('Cart');
  };
  const handleAddToCart = () => {
    addToCart({...item, quantity});
    navigation.navigate('MedicineList');
  };

  const incrementQuantity = () => {
    setQuantity(prevQuantity => prevQuantity + 1);
  };

  const decrementQuantity = () => {
    setQuantity(prevQuantity => (prevQuantity > 1 ? prevQuantity - 1 : 1));
  };

  return (
    <View style={styles.container}>
      <View style={styles.productContainer}>
        <Image source={item.image} style={{width: 300, height: 300}} />
        <View style={styles.productTitle}>
          <Text style={{flex: 2, fontSize: 24}}>{item.name}</Text>
          <Text style={{flex: 1, fontSize: 24}}>Rs. {item.price}</Text>
        </View>
      </View>
      <View style={styles.cartIconContainer}>
        <Text>{item.description}</Text>
        <View style={styles.quantity}>
          <Text style={styles.quantityLabel}>Quantity:</Text>
          <Button
            title="-"
            style={styles.roundButton}
            onPress={decrementQuantity}
          />
          <Text style={styles.quantityValue}>{quantity}</Text>
          <Button title="+" onPress={incrementQuantity} />
        </View>
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-evenly',
          }}>
          <TouchableOpacity style={styles.btnBuy} onPress={handleBuyNow}>
            <Text>Buy Now</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={handleAddToCart}>
            <Text>Add to Cart</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  btnBuy: {
    // backgroundColor: Colors.primary100,
    // borderRadius: 100,
    alignItems: 'center',
    width: 80,
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 1,
    background: 'linear-gradient(to bottom right, #ccc, #red)',
  },
  productContainer: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  productTitle: {
    alignItems: 'center',
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  quantityLabel: {
    width: '70%',
    fontSize: 16,
  },
  quantity: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  roundButton: {
    borderRadius: 25,
  },
  cartIconContainer: {
    flex: 1,
    width: '100%',
  },
});

const mapStateToProps = (state, ownProps) => {
  const {productId} = ownProps.route.params;
  return {
    product: state.products.find(product => product.id === productId),
  };
};
export default ProductDetail;
// export default connect(mapStateToProps, {addToCart})(ProductDetail);
