import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { TextInput } from 'react-native-gesture-handler';
import Swiper from 'react-native-swiper';
import { Asset } from 'expo-asset';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';

export default function Cart() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <CustommerInfo />
            </ScrollView>
        </SafeAreaView>
    );
}

const CustommerInfo = () => {
    const [selecTab, setSelecTab] = React.useState('cus')
    return (
        <View style={styles.boxCustommerInfoCart}>
            <View style={styles.boxCustommerInfoCartHeader}>
                <TouchableOpacity style={selecTab == 'login' ? [styles.boxCustommerInfoCartTab, styles.boxCustommerInfoCartTabActive] : styles.boxCustommerInfoCartTab} onPress={() => setSelecTab('login')}>
                    <Text style={selecTab == 'login' ? [styles.boxCustommerInfoCartTextSt, styles.green] : styles.boxCustommerInfoCartTextSt}>Đăng nhập</Text>
                    <Text style={selecTab == 'login' ? [styles.boxCustommerInfoCartTextNd, styles.green] : styles.boxCustommerInfoCartTextNd}>Đã là thành viên của Nagakawa</Text>
                </TouchableOpacity>
                <TouchableOpacity style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTab, styles.boxCustommerInfoCartTabActive] : styles.boxCustommerInfoCartTab} onPress={() => setSelecTab('cus')}>
                    <Text style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTextSt, styles.green] : styles.boxCustommerInfoCartTextSt}>Mua hàng nhanh</Text>
                    <Text style={selecTab == 'cus' ? [styles.boxCustommerInfoCartTextNd, styles.green] : styles.boxCustommerInfoCartTextNd}>Dành cho khách hàng mới</Text>
                </TouchableOpacity>
            </View>
            <View style={selecTab == 'login' ? [styles.boxCustommerInfoCartLoginContent, styles.active] : styles.boxCustommerInfoCartLoginContent}>
                <LoginCart />
            </View>
            <View style={selecTab == 'cus' ? [styles.boxInfoCusCart, styles.active] : styles.boxInfoCusCart}>
                <CustommerInfoCart />
            </View>

            <SelecPayOption />

            <Bill />

            <CartItem />

            <Voucher />

            <TotalCart />
        </View>
    )
}

const LoginCart = () => {
    return (
        <View style={styles.noBg}>
            <Text style={styles.loginCartTitle}>Thanh toán đơn hàng chỉ trong 1 bước với</Text>
            <View style={styles.loginCartSocial}>
                <TouchableOpacity style={styles.loginCartSocialButtonFace}>
                    <View style={styles.loginCartSocialIcCt}>
                        <FontAwesome style={styles.loginCartSocialButtonIcon} name="facebook" />
                    </View>
                    <Text style={styles.loginCartSocialButtonText}>Facebook</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.loginCartSocialButtonGoogle}>
                    <View style={styles.loginCartSocialIcCt}>
                        <FontAwesome style={styles.loginCartSocialButtonIcon} name="google" />
                    </View>
                    <Text style={styles.loginCartSocialButtonText}>Google</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.loginCartSocialButtonZalo}>
                    <View style={styles.loginCartSocialIcCt}>
                        <Image style={styles.loginCartSocialButtonImg} source={require('../assets/images/icon-zalo.png')} />
                    </View>
                    <Text style={styles.loginCartSocialButtonText}>Facebook</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.loginCartSocialForm}>
                <View style={styles.loginCartSocialFormItem}>
                    <Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
                    <TextInput style={styles.loginCartSocialFormItemInput} />
                </View>
                <View style={styles.loginCartSocialFormItem}>
                    <Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
                    <TextInput style={styles.loginCartSocialFormItemInput} />
                </View>
            </View>
            <View style={styles.loginCartSocialFormNote}>
                <Text style={styles.loginCartSocialFormNoteText}>Quên mật khẩu? Khôi phục mật khẩu </Text>
                <TouchableOpacity style={styles.loginCartSocialFormNoteButton}>
                    <Text style={styles.green}>Tại đây</Text>
                </TouchableOpacity>
            </View>
            <TouchableOpacity style={styles.loginCartSocialFormButton}>
                <Text style={styles.loginCartSocialFormButtonText}>Đăng nhập</Text>
            </TouchableOpacity>
        </View>
    )
}

const CustommerInfoCart = () => {
    const [selecSex, setSelecSex] = React.useState('male');
    const [checkedInfo, setCheckedInfo] = React.useState(false);
    const [selectedProvince, setSelectedProvince] = React.useState();
    const [selectedDistrict, setSelectedDistrict] = React.useState();
    return (
        <View style={styles.noBg}>
            <Text style={styles.boxInfoCusCartTitle}>Thông tin khách hàng</Text>
            <View style={styles.boxInfoCusCartHeading}>
                <Text style={styles.boxInfoCusCartHeadingText}>Thông tin người mua</Text>
                <Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
            </View>
            <View style={styles.boxInfoCusCartItemSex}>
                <View style={styles.boxInfoCusCartItemSexIt}>
                    <View style={styles.itemRadio}>
                        <RadioButton color={'#243a76'} value={'male'} status={selecSex === 'male' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('male')} />
                    </View>
                    <Text>Anh</Text>
                </View>
                <View style={styles.boxInfoCusCartItemSexIt}>
                    <View style={styles.itemRadio}>
                        <RadioButton color={'#243a76'} value={'female'} status={selecSex === 'female' ? 'checked' : 'unchecked'} onPress={() => setSelecSex('female')} />
                    </View>
                    <Text>Chị</Text>
                </View>
            </View>
            <View style={styles.boxInfoCusCartContent}>
                <View style={styles.boxInfoCusCartItem}>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
                    </View>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
                    </View>
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Email*" />
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Email*" />
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (Tên đường, Số nhà)*" />
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemArea} multiline={true} numberOfLines={3} placeholder="Ghi chú" />
                </View>
            </View>
            <View style={styles.boxInfoCusCartHeading}>
                <Text style={styles.boxInfoCusCartHeadingText}>Thông tin người nhận</Text>
                <Text style={styles.boxInfoCusCartHeadingNote}>(<Text style={styles.red}>*</Text>) Thông tin bắt buộc</Text>
            </View>
            <View style={styles.boxInfoCusCartItemCheckInfo}>
                <View style={styles.itemRadio}>
                    <Checkbox status={checkedInfo ? 'checked' : 'unchecked'} onPress={() => setCheckedInfo(!checkedInfo)} />
                </View>
                <Text>Lấy thông tin người mua</Text>
            </View>
            <View style={styles.boxInfoCusCartContent}>
                <View style={styles.boxInfoCusCartItem}>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Họ tên*" />
                    </View>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <TextInput style={styles.boxInfoCusCartItemInput} placeholder="SĐT*" />
                    </View>
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <Picker
                            style={styles.picker}
                            itemStyle={styles.onePickerItem}
                            selectedValue={selectedProvince}
                            onValueChange={(itemValue, itemIndex) =>
                                setSelectedProvince(itemValue)
                            }
                        >
                            <Picker.Item label="-- Chọn tỉnh/TP --" value="0" />
                            <Picker.Item label="Hà Nội" value="1" />
                            <Picker.Item label="Đà Nẵng" value="2" />
                            <Picker.Item label="Hải Phòng" value="3" />
                            <Picker.Item label="TP Hồ Chí Minh" value="4" />
                        </Picker>
                    </View>
                    <View style={styles.boxInfoCusCartItemHalf}>
                        <Picker
                            style={styles.picker}
                            itemStyle={styles.onePickerItem}
                            selectedValue={selectedDistrict}
                            onValueChange={(itemValue, itemIndex) =>
                                setSelectedDistrict(itemValue)
                            }
                        >
                            <Picker.Item label="-- Chọn Quận/Huyện --" value="0" />
                            <Picker.Item label="Hà Nội" value="1" />
                            <Picker.Item label="Đà Nẵng" value="2" />
                            <Picker.Item label="Hải Phòng" value="3" />
                            <Picker.Item label="TP Hồ Chí Minh" value="4" />
                        </Picker>
                    </View>
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ (tên đường, số nhà)*" />
                </View>
            </View>
        </View>
    )
}

const SelecPayOption = () => {
    const [checkedPayment, setCheckedPayment] = React.useState('pay1');
    const listPayment = [
        {
            id: 1,
            name: 'COD - Thanh toán khi nhận hàng',
            description: '',
            image: require('../assets/images/pay_1.png'),
        },
        {
            id: 2,
            name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ',
            description: '',
            image: require('../assets/images/pay_2.png'),
        },
        {
            id: 3,
            name: 'Trả góp qua Alepay (Ngân Lượng)',
            description: '',
            image: require('../assets/images/pay_2.png'),
        },
    ]
    return (
        <View style={styles.boxPayment}>
            <Text style={styles.boxPaymentHead}>Phương thức thanh toán</Text>
            <Text style={styles.boxPaymentTitle}>Chọn phương thức thanh toán</Text>
            <View style={styles.boxPaymentList}>
                {
                    listPayment.map(item => {
                        let idpay = 'pay' + item.id;
                        return (
                            <View style={styles.paymentItem} key={item.id}>
                                <View style={styles.paymentItemImage}>
                                    <Image style={styles.paymentItemImageCt} source={item.image} />
                                </View>
                                <Text style={styles.paymentItemText}>{item.name}</Text>
                                <View style={styles.paymentItemRadio}>
                                    <RadioButton color={'#243a76'} value={idpay} status={checkedPayment === idpay ? 'checked' : 'unchecked'} onPress={() => setCheckedPayment(idpay)} />
                                </View>
                            </View>
                        )
                    })
                }
            </View>
        </View>
    )
}

const Bill = () => {
    const [checkedBill, setCheckedBill] = React.useState(false);
    return (
        <View style={styles.boxBill}>
            <View style={styles.boxInfoCusCartItemCheckInfo}>
                <View style={styles.itemRadio}>
                    <Checkbox status={checkedBill ? 'checked' : 'unchecked'} onPress={() => setCheckedBill(!checkedBill)} />
                </View>
                <Text style={styles.boxBillText}>Yêu cầu xuất hóa đơn GTGT cho đơn hàng này</Text>
            </View>
            <View style={checkedBill ? [styles.boxBillList, styles.active] : styles.boxBillList}>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Tên công ty*" />
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Địa chỉ*" />
                </View>
                <View style={styles.boxInfoCusCartItem}>
                    <TextInput style={styles.boxInfoCusCartItemInput} placeholder="Mã số thuế*" />
                </View>
            </View>
        </View>
    )
}

const CartItem = () => {
    return (
        <View style={styles.boxCartItem}>
            <TouchableOpacity style={styles.boxCartItemBuyOther}>
                <FontAwesome style={styles.boxCartItemBuyOtherIcon} name="long-arrow-left" />
                <Text style={styles.boxCartItemBuyOtherIconText}>Quay lại mua thêm sản phẩm khác</Text>
            </TouchableOpacity>
            <View style={styles.boxCartItemContent}>
                <Text style={styles.boxCartItemContentTitle}>Giỏ hàng của bạn</Text>
                <View style={styles.boxCartItemList}>
                    <View style={styles.boxCartItemItem}>
                        <View style={styles.boxCartItemItemImage}>
                            <TouchableOpacity>
                                <View style={styles.boxCartItemItemImageCt}>
                                    <Image style={styles.boxCartItemItemImageCtImg} source={require('../assets/images/product.png')} />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.boxCartItemItemDelete}>
                                <Ionicons style={styles.boxCartItemItemDeleteIcon} name="trash-outline" />
                                <Text style={styles.boxCartItemItemDeleteText}>Xóa</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.boxCartItemItemContent}>
                            <TouchableOpacity>
                                <Text style={styles.boxCartItemItemImageName}>Khẩu trang vải kháng khuẩn Nagakawa 2 lớp - Công nghệ Nhật Bản Hộp 10 chiếc  (Hộp 10 chiếc - L)</Text>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <Text style={styles.boxCartItemItemImageBuyAfter}>Để dành mua sau</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.boxCartItemItemPriceAll}>
                            <Text style={styles.boxCartItemItemPrice}>121.000.000 đ</Text>
                            <View style={styles.selecCountContent}>
                                <TouchableOpacity style={styles.selecCountButton}>
                                    <Text style={styles.selecCountButtonText}>+</Text>
                                </TouchableOpacity>
                                <TextInput style={styles.selecCountInput} value="1" />
                                <TouchableOpacity style={styles.selecCountButton}>
                                    <Text style={styles.selecCountButtonText}>-</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    )
}

const Voucher = () => {
    const [openPopVoucher, setOpenPopVoucher] = useState(false);
    const [checkedVoucher, setCheckedVoucher,] = useState('');
    return (
        <View style={styles.boxVoucher}>
            <View style={styles.boxVoucherForm}>
                <TextInput style={styles.boxVoucherFormInput} placeholder="Mã voucher" />
                <TouchableOpacity style={styles.boxVoucherFormButton}>
                    <Text style={styles.boxVoucherFormButtonText}>Áp dụng</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.boxVoucherShowPop}>
                <TouchableOpacity style={styles.boxVoucherShowPopButton} onPress={() => setOpenPopVoucher(true)}>
                    <Image style={styles.boxVoucherShowPopImg} source={require('../assets/images/img-cart-voucher.png')} />
                    <Text style={styles.boxVoucherShowPopText}>Chọn mã voucher</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.boxVoucherNote}>
                <Text style={styles.boxVoucherNoteText}><Text style={styles.TextBold}>Lưu ý:</Text> Mã giảm giá không áp dụng kèm với chương trình trả góp 0%, sản phẩm Flash sale.</Text>
                <Text style={styles.boxVoucherNoteText}>- Các mã giảm giá được áp dụng đồng thời nếu đủ điều kiện.</Text>
                <Text style={styles.boxVoucherNoteText}>- Tài khoản đăng ký chưa được xác thực dùng NagaXu hệ thống sẽ tự động hủy đơn hàng</Text>
            </View>
            <Modal visible={openPopVoucher} animationType="slide" transparent={true} onRequestClose={() => { setOpenPopVoucher(!openPopVoucher); }}>
                <View style={styles.boxCloseModalVoucher}>
                    <TouchableOpacity style={styles.boxCloseModalVoucherPress} onPress={() => setOpenPopVoucher(false)}>
                    </TouchableOpacity>
                </View>
                <View style={styles.contentPopVoucher}>
                    <Text style={styles.contentPopVoucherTitle}>Chọn Nagakawa Voucher</Text>
                    <View style={styles.contentPopVoucherForm}>
                        <Text style={styles.contentPopVoucherFormText}>Mã Voucher</Text>
                        <TextInput style={styles.contentPopVoucherFormInput} />
                        <TouchableOpacity style={styles.contentPopVoucherFormButton}>
                            <Text style={styles.contentPopVoucherFormButtonText}>Áp dụng</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.contentPopVoucherPop}>
                        <Text style={styles.contentPopVoucherPopTitle}>Voucher có thể áp dụng</Text>
                        <View style={styles.contentPopVoucherPopList}>
                            <ScrollView>
                                <View style={styles.contentPopVoucherPopItem}>
                                    <View style={styles.contentPopVoucherPopItemLeft}>
                                        <Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
                                        <Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCenter}>
                                        <Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCheck}>
                                        <Checkbox color={'#00a456'} status={checkedVoucher === 'vc1' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc1')} />
                                    </View>
                                </View>
                                <View style={styles.contentPopVoucherPopItem}>
                                    <View style={styles.contentPopVoucherPopItemLeft}>
                                        <Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
                                        <Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCenter}>
                                        <Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCheck}>
                                        <Checkbox color={'#00a456'} status={checkedVoucher === 'vc2' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc2')} />
                                    </View>
                                </View>
                                <View style={styles.contentPopVoucherPopItem}>
                                    <View style={styles.contentPopVoucherPopItemLeft}>
                                        <Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
                                        <Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCenter}>
                                        <Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCheck}>
                                        <Checkbox color={'#00a456'} status={checkedVoucher === 'vc3' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc3')} />
                                    </View>
                                </View>
                                <View style={styles.contentPopVoucherPopItem}>
                                    <View style={styles.contentPopVoucherPopItemLeft}>
                                        <Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
                                        <Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCenter}>
                                        <Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCheck}>
                                        <Checkbox color={'#00a456'} status={checkedVoucher === 'vc4' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc4')} />
                                    </View>
                                </View>
                                <View style={styles.contentPopVoucherPopItem}>
                                    <View style={styles.contentPopVoucherPopItemLeft}>
                                        <Text style={styles.contentPopVoucherPopItemLeftSt}>Nhập</Text>
                                        <Text style={styles.contentPopVoucherPopItemLeftNd}>NAG9CVFGZ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCenter}>
                                        <Text style={styles.contentPopVoucherPopItemCenterText}>Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ</Text>
                                    </View>
                                    <View style={styles.contentPopVoucherPopItemCheck}>
                                        <Checkbox color={'#00a456'} status={checkedVoucher === 'vc5' ? 'checked' : 'unchecked'} onPress={() => setCheckedVoucher('vc5')} />
                                    </View>
                                </View>
                            </ScrollView>
                        </View>
                    </View>
                    <View style={styles.contentPopVoucherPopBot}>
                        <TouchableOpacity style={styles.contentPopVoucherPopBotBack} onPress={() => setOpenPopVoucher(false)}>
                            <Text style={styles.contentPopVoucherPopBotBackText}>Trở lại</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.contentPopVoucherPopBotOk} onPress={() => setOpenPopVoucher(false)}>
                            <Text style={styles.contentPopVoucherPopBotOkText}>Ok</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

const TotalCart = () => {
    return (
        <View style={styles.boxTotalCart}>
            <View style={styles.boxTotalCartXu}>
                <Image style={styles.boxTotalCartXuImg} source={require('../assets/images/icon_xu.png')} />
                <TouchableOpacity style={styles.boxTotalCartXuButton}>
                    <Text style={styles.boxTotalCartButtonTex}>Bạn chưa có Naga Xu </Text>
                    <FontAwesome style={styles.boxTotalCartButtonIcon} name="question-circle" />
                </TouchableOpacity>
            </View>
            <View style={styles.boxTotalCartItem}>
                <Text style={styles.boxTotalCartItemLeft}>Tổng cộng</Text>
                <Text style={styles.boxTotalCartItemRight}>5.000.000đ</Text>
            </View>
            <View style={styles.boxTotalCartItem}>
                <Text style={styles.boxTotalCartItemLeft}>Giảm giá</Text>
                <Text style={styles.boxTotalCartItemRight}>00đ</Text>
            </View>
            <View style={styles.boxTotalCartItem}>
                <Text style={styles.boxTotalCartItemLeft}>Phí giao hàng</Text>
                <Text style={styles.boxTotalCartItemRight}>00đ</Text>
            </View>
            <View style={styles.boxTotalCartItem}>
                <Text style={[styles.boxTotalCartItemLeft, styles.TextBold]}>Thanh toán</Text>
                <Text style={[styles.boxTotalCartItemRight, styles.TextBold, styles.red]}>5.000.000đ</Text>
            </View>
            <View style={styles.boxTotalCartSubmit}>
                <TouchableOpacity style={styles.boxTotalCartSubmitButton}>
                    <Ionicons style={styles.boxTotalCartSubmitIcon} name="checkmark-outline" />
                    <Text style={styles.boxTotalCartSubmitText}>Thanh toán</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height



const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f2f2f2',
    },
    boxCustommerInfoCart: {
        width: winWidth,
        padding: 10,
        backgroundColor: '#f2f2f2',
    },
    boxCustommerInfoCartHeader: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'rgba(0,0,0,0)',
        marginBottom: 10,
    },
    boxCustommerInfoCartTab: {
        width: winWidth / 2 - 15,
        padding: 10,
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 5,
        flexDirection: 'column',
        alignItems: 'center',
    },
    boxCustommerInfoCartTextSt: {
        fontSize: 13,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    },
    boxCustommerInfoCartTextNd: {
        fontSize: 10,
    },
    boxCustommerInfoCartTabActive: {
        borderColor: '#008445',
    },
    green: {
        color: '#008445',
    },
    boxCustommerInfoCartLoginContent: {
        width: '100%',
        padding: 5,
        display: 'none',
    },
    loginCartTitle: {
        width: '100%',
        textAlign: 'center',
        paddingVertical: 10,
    },
    loginCartSocial: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10,
        paddingBottom: 10,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
    },
    loginCartSocialButtonFace: {
        width: 110,
        height: 30,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#3b5998',
        borderRadius: 3,
    },
    loginCartSocialIcCt: {
        width: 30,
        height: 30,
        borderRightWidth: 1,
        borderRightColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0,0,0,0)',
    },
    loginCartSocialButtonIcon: {
        fontSize: 24,
        color: '#fff'
    },
    loginCartSocialButtonText: {
        width: 80,
        textAlign: 'center',
        color: '#fff',
    },
    loginCartSocialButtonGoogle: {
        width: 110,
        height: 30,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#df4a32',
        borderRadius: 3,
    },
    loginCartSocialButtonImg: {
        width: 24,
        height: 24,
    },
    loginCartSocialButtonZalo: {
        width: 110,
        height: 30,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#0f8edd',
        borderRadius: 3,
    },
    loginCartSocialForm: {
        marginBottom: 10,
    },
    loginCartSocialFormItem: {
        width: '100%',
        marginBottom: 10,
    },
    loginCartSocialFormItemText: {
        marginBottom: 5,
    },
    loginCartSocialFormItemInput: {
        width: '100%',
        height: 40,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 5,
    },
    loginCartSocialFormNote: {
        marginBottom: 10,
        flexDirection: 'row',
    },
    loginCartSocialFormNoteText: {},
    loginCartSocialFormNoteButton: {},
    loginCartSocialFormButton: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: '#d9282f',
    },
    loginCartSocialFormButtonText: {
        fontWeight: 'bold',
        color: '#fff'
    },
    boxInfoCusCart: {
        width: '100%',
        backgroundColor: 'rgba(0,0,0,0)',
        display: 'none',
    },
    boxInfoCusCartTitle: {
        width: '100%',
        marginBottom: 10,
        backgroundColor: '#008445',
        lineHeight: 40,
        paddingHorizontal: 10,
        fontSize: 18,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        color: '#fff',
    },
    boxInfoCusCartHeading: {
        marginBottom: 10,
        backgroundColor: 'rgba(0,0,0,0)',
        flexDirection: 'row',
        alignItems: 'center'
    },
    boxInfoCusCartHeadingText: {
        fontSize: 16,
        fontWeight: 'bold',
        marginRight: 5,
    },
    boxInfoCusCartHeadingNote: {},
    boxInfoCusCartItemSex: {
        padding: 10,
        marginBottom: 10,
        width: '100%',
        flexDirection: 'row',
    },
    boxInfoCusCartItemSexIt: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
    },
    itemRadio: {
        width: 36,
        height: 36,
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        marginRight: 5,
    },
    boxInfoCusCartContent: {
        width: '100%',
        marginBottom: 10,
        backgroundColor: 'rgba(0,0,0,0)',
    },
    boxInfoCusCartItem: {
        width: '100%',
        marginBottom: 10,
        backgroundColor: 'rgba(0,0,0,0)',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    boxInfoCusCartItemInput: {
        width: '100%',
        height: 42,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
        backgroundColor: '#fff',
    },
    red: {
        color: '#d9282f'
    },
    boxInfoCusCartItemHalf: {
        width: winWidth / 2 - 15,
        backgroundColor: 'rgba(0,0,0,0)',
    },
    boxInfoCusCartItemArea: {
        width: '100%',
        height: 85,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
        backgroundColor: '#fff',
    },
    boxInfoCusCartItemCheckInfo: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    picker: {
        height: 42,
        width: '100%',
        backgroundColor: '#fff',
        borderRadius: 5,
    },
    onePickerItem: {
        height: 46,
        color: '#222',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
        backgroundColor: '#fff',
    },
    active: {
        display: 'flex',
    },
    noBg: {
        width: '100%',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxPayment: {
        width: '100%',
        marginBottom: 20,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxPaymentHead: {
        width: '100%',
        marginBottom: 10,
        backgroundColor: '#008445',
        lineHeight: 40,
        paddingHorizontal: 10,
        fontSize: 18,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        color: '#fff',
    },
    boxPaymentTitle: {
        marginBottom: 10,
        fontSize: 16,
        fontWeight: 'bold',
    },
    boxPaymentList: {},
    paymentItem: {
        width: '100%',
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    paymentItemImage: {
        width: 31,
        height: 31,
        borderRadius: 15.5,
        overflow: 'hidden',
        marginRight: 10,
    },
    paymentItemImageCt: {
        width: 31,
        height: 31,
    },
    paymentItemText: {
        width: winWidth - 130,
    },
    paymentItemRadio: {
        width: 36,
        height: 36,
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        marginLeft: 10,
    },
    boxBill: {
        width: '100%',
        padding: 10,
        marginBottom: 20,
    },
    boxBillList: {
        display: 'none',
    },
    boxBillText: {
        fontSize: 12,
    },
    boxCartItem: {
        width: '100%',
        marginBottom: 20,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxCartItemBuyOther: {
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxCartItemBuyOtherIcon: {
        fontSize: 15,
        color: '#d9282f',
        marginRight: 5,
    },
    boxCartItemBuyOtherIconText: {
        fontSize: 15,
        color: '#d9282f',
        marginRight: 5,
        textTransform: 'uppercase'
    },
    boxCartItemContent: {
        width: '100%',
        padding: 5,
    },
    boxCartItemContentTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        lineHeight: 40,
    },
    boxCartItemList: {},
    boxCartItemItem: {
        width: '100%',
        paddingVertical: 10,
        flexDirection: 'row',
        borderTopColor: '#e1e1e1',
        borderTopWidth: 1,
    },
    boxCartItemItemImage: {
        width: 90,
    },
    boxCartItemItemImageCt: {
        width: 90,
        height: 90,
        position: 'relative',
        marginBottom: 10,
    },
    boxCartItemItemImageCtImg: {
        width: 90,
        height: 90,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    boxCartItemItemDelete: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    boxCartItemItemDeleteIcon: {
        fontSize: 18,
        color: '#999',
    },
    boxCartItemItemDeleteText: {
        fontSize: 18,
        color: '#999',
    },
    boxCartItemItemContent: {
        width: winWidth - 230,
        paddingHorizontal: 10,
    },
    boxCartItemItemImageName: {
        marginBottom: 10,
        fontWeight: '500',
    },
    boxCartItemItemImageBuyAfter: {
        color: '#00a456',
    },
    boxCartItemItemPriceAll: {
        width: 110,
    },
    boxCartItemItemPrice: {
        fontSize: 16,
        fontWeight: '500',
        color: '#d9282f',
        marginBottom: 10,
        textAlign: 'left',
    },
    selecCountContent: {
        width: 100,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    selecCountButton: {
        width: 30,
        height: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DFDFDF',
    },
    selecCountButtonText: {
        fontSize: 24,
    },
    selecCountInput: {
        width: 50,
        height: 30,
        textAlign: 'center',
        backgroundColor: '#f2f2f2',
        fontSize: 22,
    },
    boxVoucher: {
        width: '100%',
        marginBottom: 20,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxVoucherForm: {
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 5,
    },
    boxVoucherFormInput: {
        width: winWidth - 98,
        height: 40,
        paddingHorizontal: 10,
        backgroundColor: '#fff',
        borderTopLeftRadius: 5,
        borderBottomLeftRadius: 5,
        overflow: 'hidden',
    },
    boxVoucherFormButton: {
        width: 78,
        height: 40,
        backgroundColor: '#6c757d',
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    boxVoucherFormButtonText: {
        color: '#fff',
    },
    boxVoucherShowPop: {
        width: '100%',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxVoucherShowPopButton: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 15,
    },
    boxVoucherShowPopImg: {
        marginRight: 10,
    },
    boxVoucherShowPopText: {
        color: '#d9282f',
    },
    boxVoucherNote: {
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxVoucherNoteText: {
        marginBottom: 10,
    },
    TextBold: {
        fontWeight: 'bold',
    },
    boxCloseModalVoucher: {
        width: winWidth,
        height: 100,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    boxCloseModalVoucherPress: {
        width: '100%',
        height: 100,
    },
    contentPopVoucher: {
        width: winWidth,
        padding: 10,
        height: winHeight - 100,
    },
    contentPopVoucherTitle: {
        width: '100%',
        fontSize: 18,
        lineHeight: 25,
        marginBottom: 10,
    },
    contentPopVoucherForm: {
        width: '100%',
        padding: 10,
        borderRadius: 5,
        backgroundColor: '#f5f5f5',
        marginBottom: 10,
    },
    contentPopVoucherFormText: {
        marginBottom: 5,
    },
    contentPopVoucherFormInput: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        paddingHorizontal: 10,
        backgroundColor: '#fff',
        marginBottom: 10,
    },
    contentPopVoucherFormButton: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        paddingHorizontal: 10,
        backgroundColor: '#d9282f',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    contentPopVoucherFormButtonText: {
        fontSize: 18,
        textTransform: 'uppercase',
        color: '#fff',
        fontWeight: 'bold'
    },
    contentPopVoucherPop: {
        width: '100%',
        height: winHeight - 350,
    },
    contentPopVoucherPopTitle: {
        marginBottom: 10,
    },
    contentPopVoucherPopList: {
        width: '100%',
        height: winHeight - 370,
    },
    contentPopVoucherPopItem: {
        width: '100%',
        marginBottom: 10,
        borderWidth: 1,
        borderColor: '#999',
        flexDirection: 'row',
        borderRadius: 5,
        overflow: 'hidden',
        alignItems: 'center',
        paddingRight: 8,
    },
    contentPopVoucherPopItemLeft: {
        width: 130,
        padding: 10,
        backgroundColor: '#999',
        flexDirection: 'column',
        alignItems: 'center',
    },
    contentPopVoucherPopItemLeftSt: {
        color: '#fff',
        marginBottom: 5,
        fontSize: 15,
    },
    contentPopVoucherPopItemLeftNd: {
        color: '#fff',
        marginBottom: 5,
        fontSize: 15,
        textTransform: 'uppercase',
        fontWeight: 'bold'
    },
    contentPopVoucherPopItemCenter: {

    },
    contentPopVoucherPopItemCenterText: {
        width: winWidth - 194,
        paddingHorizontal: 10,
    },
    contentPopVoucherPopItemCheck: {
        width: 36,
        height: 36,
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#999',
    },
    contentPopVoucherPopBot: {
        width: '100%',
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    contentPopVoucherPopBotBack: {
        width: winWidth / 2 - 15,
        backgroundColor: '#ebebeb',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        height: 40,
    },
    contentPopVoucherPopBotBackText: {
        fontSize: 18,
        textTransform: 'uppercase',
    },
    contentPopVoucherPopBotOk: {
        width: winWidth / 2 - 15,
        backgroundColor: '#d9282f',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        height: 40,
    },
    contentPopVoucherPopBotOkText: {
        fontSize: 18,
        textTransform: 'uppercase',
        color: '#fff',
        fontWeight: 'bold',
    },
    boxTotalCart: {
        paddingHorizontal: 10,
    },
    boxTotalCartXu: {
        width: '100%',
        paddingVertical: 15,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxTotalCartXuImg: {
        width: 20,
        height: 20,
        marginRight: 10,
    },
    boxTotalCartXuButton: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxTotalCartButtonTex: {},
    boxTotalCartButtonIcon: {},
    boxTotalCartItem: {
        width: '100%',
        paddingVertical: 15,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    boxTotalCartItemLeft: {
        fontSize: 14,
        textTransform: 'uppercase',
    },
    boxTotalCartItemRight: {
        fontSize: 14,
    },
    boxTotalCartSubmit: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        paddingVertical: 10,
    },
    boxTotalCartSubmitButton: {
        width: 155,
        height: 40,
        backgroundColor: '#d9282f',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
    },
    boxTotalCartSubmitIcon: {
        fontSize: 15,
        color: '#fff',
        marginRight: 10,
    },
    boxTotalCartSubmitText: {
        fontSize: 15,
        color: '#fff',
        textTransform: 'uppercase',
        fontWeight: 'bold',
    },
});