import React from 'react';
import {
  View,
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {addToCart} from './cartActions';

const items = [
  {
    id: 1,
    name: 'Panadol',
    price: 18.0,
    image: require('../../assets/images/products/panadol.png'),
  },
  {
    id: 2,
    name: 'Amoxil 125mg Syrup',
    price: 128.0,
    image: require('../../assets/images/products/amoxil-syrup-125mg.jpg'),
  },
  {
    id: 3,
    name: 'Arinac Forte',
    price: 50.0,
    image: require('../../assets/images/products/arinac-forte.jpg'),
  },
  {
    id: 4,
    name: 'Telfast 120mg',
    price: 75.0,
    image: require('../../assets/images/products/telfast-120mg.jpg'),
  },
  {
    id: 5,
    name: 'Risek 40mg Tablet',
    price: 120.0,
    image: require('../../assets/images/products/risek-40mg.jpg'),
  },
  {
    id: 6,
    name: 'Coferb Cough Syrup',
    price: 90.0,
    image: require('../../assets/images/products/coferb-syp.jpg'),
  },
];

const Item = ({item, navigation}) => (
  <TouchableOpacity
    style={styles.container}
    onPress={() => navigation.navigate('ProductDetail', {item})}>
    <View style={styles.itemContainer}>
      <Image source={item.image} style={styles.image} />
      <Text style={styles.text}>{item.name}</Text>
      <Text style={styles.text}>Rs. {parseFloat(item.price.toFixed(2))}</Text>
    </View>
  </TouchableOpacity>
);

const MedicineList = () => {
  const navigation = useNavigation();
  return (
    <FlatList
      data={items}
      numColumns={2}
      renderItem={({item}) => <Item item={item} navigation={navigation} />}
      keyExtractor={item => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    padding: 20,
    margin: 10,
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  text: {
    fontSize: 12,
    marginTop: 10,
  },
});

export default MedicineList;
