import React, { useState } from 'react';

import { Text } from 'react-native';

import { ScrollView } from 'react-native';
import { View, Image, StyleSheet, Dimensions , TextInput} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import { IconButton, MD3Colors } from 'react-native-paper';

import SwiperFlatList from 'react-native-swiper-flatlist';

import ListBook from './comporent/ListBook';
import ListCategory from './comporent/ListCategory';
import ListBanner from './comporent/ListBanner';
import Search from './comporent/Search';
import BookDetail from './comporent/BookDetail';
import { Button } from 'react-native-paper';

const Order = ({navigation}) => {

const ip=" 192.168.1.9";

const [customerName, setCustomerName] = React.useState('');
const [customerAddress, setCustomerAddress] = React.useState('');
const [customerPhone, setCustomerPhone] = React.useState('');
const [products, setProducts] = React.useState([]);
const [note, setNote] = React.useState('');
const [totalPrice, setTotalPrice] = React.useState(0);

const calculateTotalPrice = () => {

let totalPrice = 0;
products.forEach((product) => {
totalPrice += product.price * product.quantity;
});
setTotalPrice(totalPrice);
};

return (
<View style={styles.container}>
<View style={styles.header}>
<IconButton
style={{marginTop:15}}
icon="arrow-left"
mode="contained"
color="#00ABE0"
size={20}
onPress={() => navigation.navigate('Home')}
/>
</View>

<ScrollView>
<View style={styles.container}>
<View style={styles.addressContainer}>
<Text style={styles.addressTitle}>Địa chỉ nhận hàng</Text>
<View style={styles.addressInfo}>
 <Text style={styles.addressName}>Họ tên:
{customerName}</Text>
<Text style={styles.addressAddress}>Địa chỉ:
{customerAddress}</Text>
<Text style={styles.addressPhone}>Số điện thoại:
{customerPhone}</Text>
</View>
</View>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>Sản phẩm</Text>
<View style={styles.productList}>
{products.map((product, index) => (
<View key={index} style={styles.productItem}>
<View style={styles.img}>
<Image style={styles.productImg} source={{uri:
'http://'+ip+':8080/uploads/'+item.img}} />
</View>
<Text
style={styles.productTitle}>{product.title}</Text>
<Text style={styles.productPrice}>Giá:
{product.price} VNĐ</Text>
<Text style={styles.productQuantity}>Số lượng:
{product.quantity}</Text>
</View>
))}
</View>
</View>
<View style={styles.noteContainer}>
<Text style={styles.noteTitle}>Ghi chú</Text>
<View style={styles.noteInput}>
<TextInput
placeholder="Nhập ghi chú"
value={note}
onChangeText={setNote}
name="note"
/>
</View>
</View>

<View style={styles.totalPriceContainer}>
<Text style={styles.totalPriceTitle}>Tổng tiền</Text>
<Text style={styles.totalPrice}>
{totalPrice} VNĐ
</Text>
</View>
</View>
</ScrollView>
<View style={styles.btn}>
<Button
style={styles.btn}
icon="shopping"
 mode="contained"
buttonColor="#00ABE0"
onPress={() => {
alert("Đặt hàng thành công!");
}}
>
Đặt hàng
</Button>
</View>
</View>
);
};

const styles = StyleSheet.create({

container: {
backgroundColor:'white',
flex: 1,

},
header:{
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center'
},

addressContainer: {
flex: 1,
alignItems:'flex-start',
justifyContent: 'center',
},
addressTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#000000',
},
addressInfo: {
flex: 1,
},
productContainer: {
marginTop: 20,
fontSize: 20,
},
productTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#000000',
},
productList: {
marginTop: 20,
},
productItem: {
 flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20,
},
productPrice: {
color: '#000000',
},
productQuantity: {
color: '#000000',
},
noteContainer: {
marginTop: 200,
},
noteTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#000000',
},
noteInput: {
margin: 10,
borderWidth: 1,
borderColor: '#000000',
borderRadius: 10,
padding: 5,
},
totalPriceContainer: {
marginTop: 10,
},
totalPriceTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#000000',
},
totalPrice: {
color: '#000000',
},
btn: {
width: '70%',
margin:5,
marginLeft: '28%'

},
});

export default Order;