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=" [Link]";

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

const calculateTotalPrice = () => {

let totalPrice = 0;
[Link]((product) => {
totalPrice += [Link] * [Link];
});
setTotalPrice(totalPrice);
};

return (
<View style={[Link]}>
<View style={[Link]}>
<IconButton
style={{marginTop:15}}
icon="arrow-left"
mode="contained"
color="#00ABE0"
size={20}
onPress={() => [Link]('Home')}
/>
</View>

<ScrollView>
<View style={[Link]}>
<View style={[Link]}>
<Text style={[Link]}>Địa chỉ nhận hàng</Text>
<View style={[Link]}>
 <Text style={[Link]}>Họ tên:
{customerName}</Text>
<Text style={[Link]}>Địa chỉ:
{customerAddress}</Text>
<Text style={[Link]}>Số điện thoại:
{customerPhone}</Text>
</View>
</View>
<View style={[Link]}>
<Text style={[Link]}>Sản phẩm</Text>
<View style={[Link]}>
{[Link]((product, index) => (
<View key={index} style={[Link]}>
<View style={[Link]}>
<Image style={[Link]} source={{uri:
'[Link] />
</View>
<Text
style={[Link]}>{[Link]}</Text>
<Text style={[Link]}>Giá:
{[Link]} VNĐ</Text>
<Text style={[Link]}>Số lượng:
{[Link]}</Text>
</View>
))}
</View>
</View>
<View style={[Link]}>
<Text style={[Link]}>Ghi chú</Text>
<View style={[Link]}>
<TextInput
placeholder="Nhập ghi chú"
value={note}
onChangeText={setNote}
name="note"
/>
</View>
</View>

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

const styles = [Link]({

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;