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 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 AccountHome() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Tài khoản của bạn</Text>
                </View>

                <View style={styles.accountBox}>
                    <View style={styles.accountBoxHeader}>
                        <View style={styles.accountBoxHeaderIcon}>
                            <FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
                        </View>
                        <View style={styles.accountBoxHeaderInfo}>
                            <Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
                            <Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
                        </View>
                    </View>

                    <MenuAccount />

                    <View style={styles.accountBoxContent}>
                        <Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>

                        <CustommerInfo />

                        <CustommerInfoChange />

                        <ListOrder />

                        <OrderDetail />

                        <ProductSave />

                        <ProductFavorite />

                        <ChangePassword />


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

const MenuAccount = () => {
    const [showMenuAccount, setShowMenuAccount] = useState(true)
    return (
        <View style={styles.accountBoxSelec}>
            <TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
                <Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
                <FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
            </TouchableOpacity>
            <View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="user" />
                    <Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="list" />
                    <Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="eye" />
                    <Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="archive" />
                    <Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="comment" />
                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="heart" />
                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="lock" />
                    <Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="power-off" />
                    <Text style={styles.accountNameTabText}>Logout</Text>
                </Pressable>
            </View>
        </View>
    )
}

const CustommerInfo = () => {
    return (
        <View style={styles.custommerInfo}>
            <Text style={styles.custommerInfoItemHeader}>Thông tin tài khoản</Text>
            <Text style={styles.custommerInfoItem}>Họ tên: Hurasoft Test</Text>
            <Text style={styles.custommerInfoItem}>Giới tính: Nữ</Text>
            <Text style={styles.custommerInfoItem}>Email: test@mail.com</Text>
            <Text style={styles.custommerInfoItem}>Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
            <Text style={styles.custommerInfoItem}>Tỉnh/Thành phố: Hà Nội</Text>
            <Text style={styles.custommerInfoItem}>Số điện thoại: 0912345678</Text>
            <TouchableOpacity>
                <Text style={styles.custommerInfoButtonText}>Chỉnh sửa thông tin cá nhân</Text>
            </TouchableOpacity>
        </View>
    )
}

const CustommerInfoChange = () => {
    const [selectedProvince, setSelectedProvince] = useState();
    const [checked, setChecked] = React.useState('male');
    return (
        <View style={styles.boxCustommerInfoChange}>
            <Text style={styles.titleBoxInAccount}>Cập nhật thông tin cá nhân</Text>
            <View style={styles.boxCustommerInfoChangeList}>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Họ tên</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Giới tính</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <View style={styles.registerItemSex}>
                            <View style={styles.registerItemSexItem}>
                                <Text style={styles.registerItemSexText}>Nam</Text>
                                <View style={styles.registerItemSexRadio}>
                                    <RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
                                </View>
                            </View>
                            <View style={styles.registerItemSexItem}>
                                <Text style={styles.registerItemSexText}>Nữ</Text>
                                <View style={styles.registerItemSexRadio}>
                                    <RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Địa chỉ email</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Địa chỉ nhà</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Tỉnh/TP</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <Picker
                            style={styles.picker}
                            itemStyle={styles.onePickerItem}
                            selectedValue={selectedProvince}
                            onValueChange={(itemValue, itemIndex) =>
                                setSelectedProvince(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>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Điện thoại cố định</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Điện thoại  di động</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
                        <Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

function formatCurrency(price: string | number) {
    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
    let len = priceConvert.length;
    return priceConvert.substring(0, len - 3);
}

const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {

    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props;
    const discount = Math.ceil(100 - (price / marketPrice * 100));


    return (
        <View style={[styles.itemProduct, privateStyle]}>
            <TouchableOpacity style={styles.pProductDelete}>
                <FontAwesome style={styles.pProductDeleteIcon} name="times" />
            </TouchableOpacity>
            <View style={styles.pBloxImgProduct}>
                <Text style={styles.pSkuProduct}>{productSKU}</Text>
                <Text style={styles.pDiscountProduct}>-{discount}%</Text>
                <View style={styles.pBloxImgProductBao}>
                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
                </View>
            </View>
            <Text style={styles.pNameProduct} numberOfLines={2}>
                {productName}
            </Text>
            <Text style={styles.pSummaryProduct}>{summary}</Text>
            <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
            <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
        </View>
    );
}

const productData = [
    {
        id: 1,
        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
        productSKU: 'TESTSKU',
        productImage: {
            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
        },
        price: 30000000,
        marketPrice: 50000000,
        quantity: 1,
        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
    },
    {
        id: 2,
        productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng',
        productSKU: 'TESTSKU',
        productImage: {
            small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
            original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg',
        },
        price: 25000000,
        marketPrice: 50000000,
        quantity: 0,
        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
    },
]

const ProductSave = () => {
    const itemProductStyle = {
        width: '100%',
        borderBottomWidth: 1,
        borderBottomColor: '#e8e8e8',
        position: 'relative',
    }
    return (
        <View style={styles.boxProductSave}>
            <Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
            <View style={styles.listProductSave}>
                {
                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
                    />)
                }
            </View>
        </View>
    )
}

const ProductFavorite = () => {
    const itemProductStyle = {
        width: '100%',
        borderBottomWidth: 1,
        borderBottomColor: '#e8e8e8',
        position: 'relative',
    }
    return (
        <View style={styles.boxProductSave}>
            <Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
            <View style={styles.listProductSave}>
                {
                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
                    />)
                }
            </View>
        </View>
    )
}

const ChangePassword = () => {
    return (
        <View>
            <Text style={styles.titleBoxInAccount}>Thay đổi mật khẩu</Text>
            <View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Mật khẩu hiện tại</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Mật khẩu mới</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Nhập lại mật khẩu mới</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
                        <Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const ListOrder = () => {
    return (
        <View style={styles.ListOrder}>
            <Text style={styles.titleBoxInAccount}>Danh Sách đơn hàng</Text>
            <View style={styles.ListOrderList}>
                <View style={styles.ListOrderListHeader}>
                    <Text style={styles.ListOrderListHeaderSt}>Số đơn hàng</Text>
                    <Text style={styles.ListOrderListHeaderNd}>Giá trị</Text>
                    <Text style={styles.ListOrderListHeaderRd}>Thời gian</Text>
                    <Text style={styles.ListOrderListHeaderInfo}>Thông tin</Text>
                </View>
                <View style={styles.ListOrderItem}>
                    <View style={styles.ListOrderItemSt}>
                        <Text style={styles.ListOrderItemStText}>#123456</Text>
                        <TouchableOpacity style={styles.ListOrderItemStButton}>
                            <Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
                    <Text style={styles.ListOrderItemRd}>13-03-2021</Text>
                    <Text style={styles.ListOrderItemInfo}>Đã hoàn thành</Text>
                </View>
                <View style={[styles.ListOrderItem, styles.ListOrderItemLast]}>
                    <View style={styles.ListOrderItemSt}>
                        <Text style={styles.ListOrderItemStText}>#123457</Text>
                        <TouchableOpacity style={styles.ListOrderItemStButton}>
                            <Text style={styles.ListOrderItemStButtonText}>Xem chi tiết</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.ListOrderItemNd}>100.000.000 đ</Text>
                    <Text style={styles.ListOrderItemRd}>13-03-2021</Text>
                    <Text style={styles.ListOrderItemInfo}>Hủy bỏ</Text>
                </View>
            </View>
        </View>
    )
}

const OrderDetail = () => {
    return (
        <View style={styles.boxOrderDetail}>
            <Text style={styles.boxOrderDetailNum}>Đơn hàng số #123456</Text>
            <Text style={styles.boxOrderDetailTime}><Text style={styles.bold}>Thời gian đặt mua: </Text>13-3-2021, 5:00 pm</Text>
            <View style={styles.boxOrderDetailInfo}>
                <Text style={styles.boxOrderDetailInfoTitle}>Thông tin người mua</Text>
                <View style={styles.boxOrderDetailInfoItem}>
                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Họ và tên:</Text>
                    <Text style={styles.boxOrderDetailInfoItemTextNd}>Hurasoft Test</Text>
                </View>
                <View style={styles.boxOrderDetailInfoItem}>
                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Email:</Text>
                    <Text style={styles.boxOrderDetailInfoItemTextNd}>test@mail.com</Text>
                </View>
                <View style={styles.boxOrderDetailInfoItem}>
                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Số điện thoại:</Text>
                    <Text style={styles.boxOrderDetailInfoItemTextNd}>0912345678</Text>
                </View>
                <View style={styles.boxOrderDetailInfoItem}>
                    <Text style={styles.boxOrderDetailInfoItemTextSt}>Địa chỉ:</Text>
                    <Text style={styles.boxOrderDetailInfoItemTextNd}>30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
                </View>
            </View>
            <View style={styles.boxOrderDetailList}>
                <View style={styles.boxOrderDetailListItem}>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>STT</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <Text style={styles.boxOrderDetailListItemText}>1</Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Ảnh</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <View style={styles.boxOrderDetailListItemImage}>
                                <Image style={styles.boxOrderDetailListItemImageCt} source={{ uri: 'https://hanoicomputercdn.com/media/product/250_55620_ban_game_k_deck_khung_kim_loai_mat_go_tu_nhien_phu_pu_bong.jpg' }} />
                            </View>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Tên Sản phẩm</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>
                                Bàn Game K-Deck  ( Khung Kim Loại , Mặt Gỗ Tự Nhiên Phủ PU Bóng )
                            </Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Giá bán</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Số lượng</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <Text style={styles.boxOrderDetailListItemText}>1</Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLine}>
                        <View style={styles.boxOrderDetailListItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Tổng</Text>
                        </View>
                        <View style={styles.boxOrderDetailListItemRight}>
                            <Text style={styles.boxOrderDetailListItemText}>30.000.000 đ</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.boxOrderDetailTotal}>
                    <View style={styles.boxOrderDetailListItemLineTotal}>
                        <View style={styles.boxOrderTotalItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Giá trị</Text>
                        </View>
                        <View style={styles.boxOrderTotalItemRight}>
                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.000.000 đ</Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLineTotal}>
                        <View style={styles.boxOrderTotalItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Phí vận chuyển</Text>
                        </View>
                        <View style={styles.boxOrderTotalItemRight}>
                            <Text style={[styles.boxOrderDetailListItemText]}>30.000 đ</Text>
                        </View>
                    </View>
                    <View style={styles.boxOrderDetailListItemLineTotal}>
                        <View style={styles.boxOrderTotalItemLeft}>
                            <Text style={styles.boxOrderDetailListItemText}>Tổng giá trị đơn hàng</Text>
                        </View>
                        <View style={styles.boxOrderTotalItemRight}>
                            <Text style={[styles.boxOrderDetailListItemText, styles.bold]}>30.030.000 đ</Text>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    )
}

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    accountBox: {
        marginBottom: 20,
        width: winWidth,
        paddingHorizontal: 10,
    },
    accountBoxHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 20,
    },
    accountBoxHeaderIcon: {
        width: 60,
        height: 60,
        borderRadius: 30,
        overflow: 'hidden',
        backgroundColor: '#008445',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 20,
    },
    accountBoxHeaderIconFont: {
        fontSize: 40,
        color: '#fff',
        lineHeight: 40,
    },
    accountBoxHeaderInfo: {
        width: winWidthP10 - 80,
    },
    accountBoxHeaderInfoText: {
        marginBottom: 10,
    },
    accountBoxHeaderInfoName: {
        fontSize: 16,
        textTransform: 'uppercase',
        fontWeight: 'bold'
    },
    accountBoxSelec: {
        marginBottom: 20,
    },
    accountBoxSelecBox: {
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#999',
        paddingHorizontal: 10,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    accountBoxSelecBoxText: {
        textTransform: 'uppercase',
        fontWeight: 'bold',
    },
    accountBoxSelecBoxIcon: {},
    accountBoxSelecList: {
        width: '100%',
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#999',
        display: 'none',
    },
    active: {
        display: 'flex',
    },
    accountNameTab: {
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    accountNameTabIcon: {
        fontSize: 24,
        color: '#7b7b7b',
        marginRight: 8,
    },
    accountNameTabText: {},
    accountBoxContent: {},
    accountBoxTextHome: {},
    custommerInfo: {
    },
    custommerInfoItemHeader: {
        marginBottom: 10,
        fontWeight: 'bold',
    },
    custommerInfoItem: {
        marginBottom: 10,
    },
    custommerInfoButtonText: {
        color: '#ed1b24'
    },
    boxCustommerInfoChange: {},
    boxCustommerInfoChangeList: {
        padding: 10,
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
    },
    titleBoxInAccount: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    custommerInfoChangeItem: {
        marginBottom: 15,
        flexDirection: 'row',
        alignItems: 'center'
    },
    custommerInfoChangeItemText: {
        width: 148,
    },
    custommerInfoChangeItemContent: {
        width: winWidthP10 - 170,
    },
    custommerInfoChangeItemInput: {
        width: '100%',
        height: 36,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
    },
    registerItemSex: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    registerItemSexItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
    },
    registerItemSexText: {
        marginRight: 5,
    },
    registerItemSexRadio: {
        width: 36,
        height: 36,
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 18,
    },
    picker: {
        height: 46,
        width: '100%',
    },
    onePickerItem: {
        height: 46,
        color: '#222',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
    },
    boxCustommerInfoChangeSubmit: {
        width: 150,
        height: 36,
        backgroundColor: 'red',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
    },
    boxCustommerInfoChangeSubmitText: {
        color: '#fff'
    },
    boxProductSave: {},
    boxProductSaveTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
    },
    listProductSave: {},
    ListOrder: {},
    ListOrderList: {
        width: '100%',
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
        padding: 5
    },
    ListOrderListHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
        height: 40,
    },
    ListOrderListHeaderSt: {
        fontWeight: 'bold',
        width: winWidthP10 - 260,
        fontSize: 12,
    },
    ListOrderListHeaderNd: {
        fontWeight: 'bold',
        width: 90,
        fontSize: 12,
    },
    ListOrderListHeaderRd: {
        fontWeight: 'bold',
        width: 75,
        fontSize: 12,
    },
    ListOrderListHeaderInfo: {
        fontWeight: 'bold',
        width: 90,
        fontSize: 12,
    },
    ListOrderItem: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
        paddingVertical: 10,
    },
    ListOrderItemLast: {
        borderBottomWidth: 0,
    },
    ListOrderItemSt: {
        width: winWidthP10 - 260,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
    },
    ListOrderItemStText: {
        fontSize: 12,
        marginRight: 6,
    },
    ListOrderItemStButton: {},
    ListOrderItemStButtonText: {
        fontSize: 12,
        color: '#f78d1c'
    },
    ListOrderItemNd: {
        width: 90,
        fontSize: 12,
    },
    ListOrderItemRd: {
        width: 75,
        fontSize: 12,
    },
    ListOrderItemInfo: {
        width: 90,
        fontSize: 12,
    },
    boxOrderDetail: {},
    boxOrderDetailNum: {
        width: '100%',
        marginBottom: 15,
        fontSize: 21,
        fontWeight: 'bold',
        textAlign: 'center'
    },
    boxOrderDetailTime: {
        marginBottom: 15,
    },
    boxOrderDetailInfo: {
        borderWidth: 1,
        borderRadius: 5,
        borderColor: '#e1e1e1',
        marginBottom: 20,
        padding: 8,
    },
    boxOrderDetailInfoTitle: {
        fontWeight: 'bold',
        color: '#f60',
        marginBottom: 10,
    },
    boxOrderDetailInfoItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    boxOrderDetailInfoItemTextSt: {
        width: 100,
    },
    boxOrderDetailInfoItemTextNd: {
        width: winWidthP10 - 120,
    },
    boxOrderDetailList: {
        borderWidth: 1,
        borderRadius: 5,
        borderColor: '#e1e1e1',
        width: '100%',
        flexDirection: 'column',
    },
    bold: {
        fontWeight: 'bold',
    },
    boxOrderDetailListItem: {
        width: '100%',
        flexDirection: 'column',
    },
    boxOrderDetailListItemLine: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
        width: '100%',
    },
    boxOrderDetailListItemLineTotal: {
        width: '100%',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
        alignItems: 'center',
    },
    boxOrderDetailListItemLeft: {
        width: 100,
        padding: 10,
    },
    boxOrderDetailListItemText: {},
    boxOrderDetailListItemRight: {
        width: winWidthP10 - 120,
        borderLeftColor: '#e1e1e1',
        borderLeftWidth: 1,
        padding: 10,
    },
    boxOrderDetailListItemImage: {
        width: 75,
        height: 75,
        position: 'relative',
    },
    boxOrderDetailListItemImageCt: {
        width: '100%',
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
    },
    boxOrderTotalItemLeft: {
        width: '50%',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        padding: 10,
    },
    boxOrderTotalItemRight: {
        width: '50%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        borderLeftColor: '#e1e1e1',
        borderLeftWidth: 1,
        padding: 10,
    },
    boxOrderDetailTotal: {
        width: '100%',
        flexDirection: 'column',
    },
    itemProduct: {
        padding: 10,
    },
    pBloxImgProduct: {
        position: 'relative',
        marginBottom: 10,
    },
    pSkuProduct: {
        position: 'absolute',
        fontSize: 12,
        color: '#e00',
        top: 0,
        left: 0,
        lineHeight: 36,
        zIndex: 10,
    },
    pDiscountProduct: {
        width: 36,
        height: 36,
        backgroundColor: '#e00',
        position: 'absolute',
        top: 0,
        right: 0,
        color: '#fff',
        textAlign: 'center',
        lineHeight: 36,
        borderRadius: 18,
        overflow: 'hidden',
        fontSize: 12,
        zIndex: 10,
    },
    pBloxImgProductBao: {
        position: 'relative',
        paddingTop: '100%',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    pImgProduct: {
        position: 'absolute',
        top: 0,
        left: '5%',
        right: 0,
        bottom: 0,
        maxHeight: 500,
        width: '90%',
    },
    pNameProduct: {
        height: 40,
        lineHeight: 20,
        overflow: 'hidden',
        fontSize: 14,
        color: '#111',
        marginBottom: 5,
    },
    priceProduct: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#f10000',
        marginBottom: 5,
    },
    oldPriceProduct: {
        fontSize: 14,
        color: '#b7b7b7',
        marginBottom: 5,
        height: 24,
        lineHeight: 24,
        overflow: 'hidden',
        textDecorationLine: 'line-through',
    },
    pBottonProduct: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: 5,
    },
    pStatusProduct: {
        fontSize: 13,
        color: '#00a706',
    },
    pCartProduct: {
        fontSize: 13,
        color: '#333',
    },
    pStatusProductIcon: {
        fontSize: 15,
    },
    pCartProductIcon: {
        fontSize: 15
    },
    pProductDelete: {},
    pProductDeleteIcon: {
        fontSize: 18,
    },
    pSummaryProduct: {
        marginBottom: 10,
        lineHeight: 20,
    },
})