import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';


export default function CartDetail() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.boxCartPage}>
                    <View style={styles.boxCartPageHeader}>
                        <View style={styles.boxCartPageBackHome}>
                            <Pressable>
                                <Ionicons style={styles.boxCartPageBackHomeIcon} name="arrow-back-outline" />
                            </Pressable>
                            <Text style={styles.boxCartPageBackHomeText}>Giỏ hàng</Text>
                        </View>
                        <Pressable style={styles.boxCartPageDeleteAll}>
                            <Text style={styles.boxCartPageDeleteAllText}>Xóa toàn bộ</Text>
                        </Pressable>
                    </View>
                    <View style={styles.boxCartPageListProduct}>
                        <CartItem />
                    </View>

                    <Voucher />

                    <PayOption />

                    <CustommerInfoCart />

                    <PolicyFooter />

                    <Social />

                    <ShowroomList />

                    <FooterInfo />
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}


const CartItem = () => {
    return (
        <View style={styles.cartItem}>
            <View style={styles.cartItemImg}>
                <Image style={styles.cartItemImgContent} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_56516_vosro3405__4_.png' }} />
            </View>
            <View style={styles.cartItemCtNd}>
                <Text style={styles.cartItemProName} numberOfLines={2}>
                    Laptop Dell Vostro 3405 (V4R53500U003W) (R5 3500U 8GB asa asas )
                </Text>
                <TouchableOpacity style={styles.cartItemDelete}>
                    <FontAwesome style={styles.cartItemDeleteIcon} name="trash-o" />
                </TouchableOpacity>
            </View>
            <View style={styles.cartItemCtRd}>
                <Text style={styles.cartItemPrice}>20.000.000 đ</Text>
                <View style={styles.cartItemQuantity}>
                    <Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>-</Text></Pressable>
                    <TextInput style={styles.cartItemQuantityInput} value="1" />
                    <Pressable style={styles.cartItemQuantityChange}><Text style={styles.cartItemQuantityChangeText}>+</Text></Pressable>
                </View>
            </View>
        </View>
    );
}

const Voucher = () => {
    return (
        <View style={styles.voucher}>
            <Text style={styles.voucherTitle}>Mã giảm giả / Quà tặng</Text>
            <View style={styles.voucherContent}>
                <TextInput style={styles.voucherInput} placeholder="Nhập mã giảm giá" />
                <Pressable style={styles.voucherSubmit}>
                    <LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientBg}>
                        <Text style={styles.voucherSubmitText}>Áp dụng</Text>
                    </LinearGradient>
                </Pressable>
            </View>
        </View>
    )
}

const PayOption = () => {
    const [checked, setChecked] = React.useState('pay1');
    const listPayment = [
        {
            id: 1,
            name: 'Thanh toán tiền mặt khi nhận hàng (tiền mặt / quẹt thẻ ATM, Visa, Master)',
            description: '',
        },
        {
            id: 2,
            name: 'Thanh toán qua chuyển khoản qua tài khoản ngân hàng (khuyên dùng)',
            description: '',
        },
        {
            id: 3,
            name: 'Thanh toán qua Ngân Lượng (ATM nội địa, Visa, Master)',
            description: '',
        },
        {
            id: 4,
            name: 'Trả góp qua Alepay (Ngân Lượng)',
            description: '',
        },
    ]
    return (
        <View style={styles.BoxPayment}>
            <Text style={styles.BoxPaymentTitle}>Lựa chọn hình 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.paymentItemRadio}>
                                    <RadioButton color={'#243a76'} value={idpay} status={checked === idpay ? 'checked' : 'unchecked'} onPress={() => setChecked(idpay)} />
                                </View>
                                <Text style={styles.paymentItemText}>{item.name}</Text>
                            </View>
                        )
                    })
                }
            </View>
        </View>
    )
}

const CustommerInfoCart = () => {
    const [selectedLanguage, setSelectedLanguage] = useState();
    const [checked, setChecked] = React.useState(false);
    return (
        <View style={styles.BoxCustommerInfoCart}>
            <Text style={styles.BoxPaymentTitle}>Thông tin khách hàng</Text>
            <View style={styles.BoxCustommerInfoCartList}>
                <View style={styles.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Họ và tên*</Text>
                    <TextInput style={styles.cartCusItemInput} />
                </View>
                <View style={styles.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Email*</Text>
                    <TextInput style={styles.cartCusItemInput} />
                </View>
                <View style={styles.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Số điện thoại*</Text>
                    <TextInput style={styles.cartCusItemInput} />
                </View>
                <View style={styles.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Chọn tỉnh thành phố*</Text>
                    <Picker
                        style={styles.picker}
                        itemStyle={styles.onePickerItem}
                        selectedValue={selectedLanguage}
                        onValueChange={(itemValue, itemIndex) =>
                            setSelectedLanguage(itemValue)
                        }
                    >
                        <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.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Địa chỉ*</Text>
                    <TextInput multiline={true} numberOfLines={3} style={styles.cartCusItemArea} />
                </View>
                <View style={styles.cartCusItem}>
                    <Text style={styles.cartCusItemText}>Ghi chú</Text>
                    <TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
                </View>
            </View>
            <View style={styles.companyCart}>
                <View style={styles.companyCartCheck}>
                    <View style={styles.companyCartCheckBox}>
                        <Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() => setChecked(!checked)} />
                    </View>
                    <Text style={styles.companyCartCheckText}>Xuất hóa đơn công ty</Text>
                </View>
                <View style={styles.companyCartList}>
                    <View style={styles.cartCusItem}>
                        <Text style={styles.cartCusItemText}>Công ty/ tổ chức*:</Text>
                        <TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
                    </View>
                    <View style={styles.cartCusItem}>
                        <Text style={styles.cartCusItemText}>Địa chỉ*:</Text>
                        <TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
                    </View>
                    <View style={styles.cartCusItem}>
                        <Text style={styles.cartCusItemText}>Mã số thuế*:</Text>
                        <TextInput multiline={true} numberOfLines={4} style={styles.cartCusItemArea} />
                    </View>
                </View>
            </View>
        </View>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const halfWinWidth = winWidth / 2;
const ratio = winWidth / 500; //541 is actual image width

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    boxCartPage: {
        marginBottom: 20,
        width: winWidth
    },
    boxCartPageHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        height: 40,
        alignItems: 'center',
        paddingHorizontal: 10,
        borderBottomColor: '#d42333',
        borderBottomWidth: 1,
    },
    boxCartPageBackHome: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    boxCartPageBackHomeIcon: {
        fontSize: 14,
        marginRight: 8,
        width: 30
    },
    boxCartPageBackHomeText: {
        fontWeight: 'bold'
    },
    boxCartPageDeleteAll: {},
    boxCartPageDeleteAllText: {
        fontWeight: 'bold',
        color: '#f00'
    },
    boxCartPageListProduct: {
        width: winWidth - 20,
        marginLeft: 10,
        marginTop: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        marginBottom: 15,
    },
    cartItem: {
        padding: 10,
    },
    cartItemImg: {
        position: 'relative',
        paddingTop: '100%',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        width: '100%',
    },
    cartItemImgContent: {
        position: 'absolute',
        top: 0,
        left: '5%',
        right: 0,
        bottom: 0,
        maxHeight: 500,
        width: '90%',
    },
    cartItemCtNd: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 5,
        width: '100%',
        alignItems: 'center'
    },
    cartItemProName: {
        fontSize: 14,
        height: 40,
        lineHeight: 20,
        width: winWidth - 80,
    },
    cartItemDelete: {
        width: 60,
        flexDirection: 'row',
        justifyContent: 'center',
        height: 40,
        alignItems: 'center',
        display: 'flex',
    },
    cartItemDeleteIcon: {
        fontSize: 24,
        color: '#f00'
    },
    cartItemCtRd: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        alignItems: 'center'
    },
    cartItemPrice: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#e00'
    },
    cartItemQuantity: {
        width: 100,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#e1e1e1',
        borderWidth: 1,
    },
    cartItemQuantityChange: {
        width: 30,
        height: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    cartItemQuantityChangeText: {},
    cartItemQuantityInput: {
        width: 40,
        height: 30,
        textAlign: 'center',
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderLeftColor: '#e1e1e1',
        borderRightColor: '#e1e1e1',
    },
    voucher: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    voucherTitle: {
        fontWeight: 'bold',
        fontSize: 14,
        marginBottom: 5,
    },
    voucherContent: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    voucherInput: {
        borderWidth: 1,
        borderColor: '#ccc',
        height: 34,
        paddingHorizontal: 10,
        borderRadius: 5,
        width: winWidth - 110,
    },
    voucherSubmit: {
        width: 85,
        marginLeft: 5,
    },
    linearGradientBg: {
        width: '100%',
        height: 34,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    voucherSubmitText: {
        color: '#fff',
        fontWeight: 'bold'
    },
    BoxPayment: {
        paddingHorizontal: 10,
    },
    BoxPaymentTitle: {
        padding: 10,
        backgroundColor: '#243a76',
        borderRadius: 3,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
        textTransform: 'uppercase',
        overflow: 'hidden',
        marginBottom: 10,
    },
    BoxPaymentList: {
        flexDirection: 'column',
    },
    paymentItem: {
        flexDirection: 'row',
        marginBottom: 10,
        alignItems: 'center'
    },
    paymentItemRadio: {
        width: 36,
        height: 36,
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#222',
        marginRight: 10,
        position: 'relative',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
    },
    paymentItemText: {
        width: winWidth - 56,
    },
    BoxCustommerInfoCart: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    BoxCustommerInfoCartList: {
        flexDirection: 'column',
    },
    cartCusItem: {
        flexDirection: 'column',
        marginBottom: 10,
    },
    cartCusItemText: {
        fontSize: 14,
        marginBottom: 5,
    },
    cartCusItemInput: {
        height: 34,
        width: '100%',
        paddingHorizontal: 10,
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
    },
    cartCusItemArea: {
        height: 65,
        width: '100%',
        padding: 10,
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
    },
    picker: {
        height: 42,
        width: '100%',
    },
    onePickerItem: {
        height: 46,
        color: '#222',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
    },
    companyCart: {
        marginTop: 5,
    },
    companyCartCheck: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    companyCartCheckBox: {
        width: 36,
        height: 36,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        marginRight: 10,
        borderRadius: 18,
    },
    companyCartCheckText: {},
    companyCartList: {},
})