import * as React from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground } 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';

export default function HomePage() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>

                <SliderHome />

                <CategoryHomePage />

                <FlastSale />

                <ProductHot />

                <ProductBestSale />

                <ComboHome />

                <ProductHome />
            </ScrollView>
        </SafeAreaView>
    );
}

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

const SliderHome = () => {

    const imageSlider = [
        {
            img: require('../assets/images/slider.jpg'),
        },
        {
            img: require('../assets/images/slider.jpg'),
        },
        {
            img: require('../assets/images/slider.jpg'),
        },
    ]

    return (
        <View style={styles.slider}>
            <Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000}
                showsPagination={true}
                paginationStyle={{ position: 'absolute', left: 0, bottom: 15, }}
                dotStyle={{ width: 10, height: 10, borderRadius: 5, marginHorizontal: 5, backgroundColor: 'rgba(0,0,0,0.2)' }}
                activeDotStyle={{ width: 10, height: 10, borderRadius: 5, marginHorizontal: 5, backgroundColor: 'rgba(0,0,0,0.8)' }}
            >
                {
                    imageSlider.map((item, index) => {
                        return (<Image style={styles.imgSlider} key={index} source={item.img} />);
                    })
                }
            </Swiper>
        </View>
    );
}

const CategoryHomePage = () => {
    return (
        <View style={styles.boxCatHome}>
            <ScrollView horizontal={true} style={styles.boxCatHomeList}>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat1.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Siêu phẩm hè</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat2.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Diện gia dụng</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat3.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Đồ gia dụng</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat4.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Thiết bị nhà bếp</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat5.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Điều hòa</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat6.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Khẩu trang vải</Text>
                </View>
                <View style={styles.boxCatHomeItem}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat7.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Deal Hot</Text>
                </View>
                <View style={[styles.boxCatHomeItem, styles.boxCatHomeItemLast]}>
                    <View style={styles.boxCatHomeItemImg}>
                        <Image style={styles.boxCatHomeImg} source={require('../assets/images/icon-cat8.png')} />
                    </View>
                    <Text style={styles.boxCatHomeText}>Combo</Text>
                </View>
            </ScrollView>
        </View>
    )
}

const FlastSale = () => {
    return (
        <View style={styles.boxFlastSaleHome}>
            <View style={styles.boxFlastSaleHomeTitle}>
                <Image style={styles.boxFlastSaleHomeTitleImg} source={require('../assets/images/flashsale.png')} />
                <TouchableOpacity style={styles.boxFlastSaleHomeTitleVm}>
                    <Text style={styles.boxFlastSaleHomeTitleVmText}>Xem tất cả</Text>
                    <FontAwesome style={styles.boxFlastSaleHomeTitleVmIcon} name="angle-double-right" />
                </TouchableOpacity>
            </View>
            <View style={styles.boxFlastSaleHomeFirstItem}>
                <View style={styles.boxFlastSaleHomeImg}>
                    <Image style={styles.boxFlastSaleHomeImgCt} source={require('../assets/images/product.png')} />
                </View>
                <Text style={styles.boxFlastSaleHomeFirstName} numberOfLines={2}>NỒI CHIÊN KHÔNG DẦU SMARTPLUS NAGAKAWA NAG3303 (9L)</Text>
                <View style={styles.boxFlastSaleHomeFirstAllPrice}>
                    <View style={styles.boxFlastSaleHomeFirstPrice}>
                        <Text style={styles.boxFlastSaleHomeFirstPriceName}>Giá sốc online</Text>
                        <Text style={styles.boxFlastSaleHomeFirstPriceText}>4.100.000đ</Text>
                    </View>
                    <View style={styles.boxFlastSaleHomeFirstPriceOld}>
                        <Text style={styles.boxFlastSaleHomeFirstOldPrice}>4.500.000đ</Text>
                        <Text style={styles.boxFlastSaleHomeFirstDiscount}>-30%</Text>
                    </View>
                </View>
                <View style={styles.boxFlastSaleHomeFirstSaleQuan}>
                    <View style={styles.boxFlastSaleHomeFirstSaleQuanLeft}>
                        <View style={styles.boxFlastSaleHomeFirstSaleQuanLeftCt}>
                            <View style={styles.boxFlastSaleHomeFirstSaleQuanLeftDown}></View>
                            <Text style={styles.boxFlastSaleHomeFirstSaleQuanLeftText}>Đã bán 6</Text>
                        </View>
                    </View>
                    <View style={styles.boxFlastSaleHomeFirstSaleQuanRight}>
                        <View style={styles.boxFlastSaleHomeFirstSaleQuanRightCt}>
                            <Text style={styles.boxFlastSaleHomeFirstSaleQuanRightText}>Đã bán</Text>
                            <Text style={styles.boxFlastSaleHomeFirstSaleQuanRightTextRed}>6</Text>
                            <Text style={styles.boxFlastSaleHomeFirstSaleQuanRightText}>/ 30 sản phẩm</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.boxFlastSaleHomeFirstTime}>
                    <Text style={styles.boxFlastSaleHomeFirstTimeTitle}>Kết thúc trong</Text>
                    <View style={styles.boxFlastSaleHomeFirstTimeList}>
                        <View style={styles.boxFlastSaleHomeFirstTimeItem}>
                            <View style={styles.boxFlastSaleHomeFirstItemCt}>
                                <Text style={styles.boxFlastSaleHomeFirstTimeNum}>04</Text>
                            </View>
                            <Text style={styles.boxFlastSaleHomeFirstTimeText}>Giờ</Text>
                        </View>
                        <Text style={styles.boxFlastSaleHomeFirstTimeTextChia}>:</Text>
                        <View style={styles.boxFlastSaleHomeFirstTimeItem}>
                            <View style={styles.boxFlastSaleHomeFirstItemCt}>
                                <Text style={styles.boxFlastSaleHomeFirstTimeNum}>08</Text>
                            </View>
                            <Text style={styles.boxFlastSaleHomeFirstTimeText}>Phút</Text>
                        </View>
                        <Text style={styles.boxFlastSaleHomeFirstTimeTextChia}>:</Text>
                        <View style={styles.boxFlastSaleHomeFirstTimeItem}>
                            <View style={styles.boxFlastSaleHomeFirstItemCt}>
                                <Text style={styles.boxFlastSaleHomeFirstTimeNum}>56</Text>
                            </View>
                            <Text style={styles.boxFlastSaleHomeFirstTimeText}>Giây</Text>
                        </View>
                    </View>
                </View>
            </View>
            <View style={styles.boxFlastSaleHomeList}>
                <ScrollView horizontal={true}>
                    <View style={styles.boxFlastSaleHomeListItem}>
                        <View style={styles.boxFlastSaleHomeListItemImg}>
                            <Image style={styles.boxFlastSaleHomeImgCt} source={require('../assets/images/product.png')} />
                        </View>
                        <View style={styles.boxFlastSaleHomeListItemInfo}>
                            <Text style={styles.boxFlastSaleHomeListItemName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng</Text>
                            <Text style={styles.boxFlastSaleHomeListItemPrice}>1.292.000đ</Text>
                            <View style={styles.boxFlastSaleHomeListItemOldPriceAll}>
                                <Text style={styles.boxFlastSaleHomeListItemOldPrice}>1.634.000đ</Text>
                                <Text style={styles.boxFlastSaleHomeListItemDiscount}>-30%</Text>
                            </View>
                        </View>
                    </View>
                    <View style={styles.boxFlastSaleHomeListItem}>
                        <View style={styles.boxFlastSaleHomeListItemImg}>
                            <Image style={styles.boxFlastSaleHomeImgCt} source={require('../assets/images/product.png')} />
                        </View>
                        <View style={styles.boxFlastSaleHomeListItemInfo}>
                            <Text style={styles.boxFlastSaleHomeListItemName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng</Text>
                            <Text style={styles.boxFlastSaleHomeListItemPrice}>1.292.000đ</Text>
                            <View style={styles.boxFlastSaleHomeListItemOldPriceAll}>
                                <Text style={styles.boxFlastSaleHomeListItemOldPrice}>1.634.000đ</Text>
                                <Text style={styles.boxFlastSaleHomeListItemDiscount}>-30%</Text>
                            </View>
                        </View>
                    </View>
                    <View style={[styles.boxFlastSaleHomeListItem, styles.boxFlastSaleHomeListItemLast]}>
                        <View style={styles.boxFlastSaleHomeListItemImg}>
                            <Image style={styles.boxFlastSaleHomeImgCt} source={require('../assets/images/product.png')} />
                        </View>
                        <View style={styles.boxFlastSaleHomeListItemInfo}>
                            <Text style={styles.boxFlastSaleHomeListItemName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) - Van xả kép - Hàng chính hãng</Text>
                            <Text style={styles.boxFlastSaleHomeListItemPrice}>1.292.000đ</Text>
                            <View style={styles.boxFlastSaleHomeListItemOldPriceAll}>
                                <Text style={styles.boxFlastSaleHomeListItemOldPrice}>1.634.000đ</Text>
                                <Text style={styles.boxFlastSaleHomeListItemDiscount}>-30%</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        </View>
    )
}

const ProductHot = () => {
    return (
        <View style={styles.boxProductHot}>
            <Image style={styles.bgProductHot} source={require('../assets/images/bg-hot.png')} />
            <Text style={styles.boxProductHotTitle}>Khuyến mại hot mỗi ngày</Text>
            <View style={styles.boxProductHotList}>
                <ScrollView horizontal={true}>
                    <View style={styles.boxProductHotItem}>
                        <View style={styles.pContainer}>
                            <View style={styles.pImgContent}>
                                <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                                <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                                <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                            </View>
                            <View style={styles.pInfo}>
                                <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                                <Text style={styles.pPrice}>1.292.000đ</Text>
                                <View style={styles.pAllSale}>
                                    <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                    <Text style={styles.pDiscount}>-30%</Text>
                                </View>
                                <View style={styles.pOffer}>
                                    <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                    <Text style={styles.pOfferPrice}>500.000đ</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                    <View style={styles.boxProductHotItem}>
                        <View style={styles.pContainer}>
                            <View style={styles.pImgContent}>
                                <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                                <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                                <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                            </View>
                            <View style={styles.pInfo}>
                                <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                                <Text style={styles.pPrice}>1.292.000đ</Text>
                                <View style={styles.pAllSale}>
                                    <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                    <Text style={styles.pDiscount}>-30%</Text>
                                </View>
                                <View style={styles.pOffer}>
                                    <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                    <Text style={styles.pOfferPrice}>500.000đ</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                    <View style={[styles.boxProductHotItem, styles.boxProductHotItemLast]}>
                        <View style={styles.pContainer}>
                            <View style={styles.pImgContent}>
                                <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                                <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                                <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                            </View>
                            <View style={styles.pInfo}>
                                <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                                <Text style={styles.pPrice}>1.292.000đ</Text>
                                <View style={styles.pAllSale}>
                                    <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                    <Text style={styles.pDiscount}>-30%</Text>
                                </View>
                                <View style={styles.pOffer}>
                                    <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                    <Text style={styles.pOfferPrice}>500.000đ</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
            <View style={styles.vmWhite}>
                <TouchableOpacity style={styles.vmWhiteButton}>
                    <Text style={styles.vmWhiteText}>Xem tất cả</Text>
                    <FontAwesome style={styles.vmWhiteIcon} name="angle-double-right" />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const ProductBestSale = () => {
    return (
        <View style={styles.productBestSale}>
            <View style={styles.productBestSaleTitle}>
                <Image style={styles.productBestSaleTitleImg} source={require('../assets/images/bg-combo.png')} />
                <Text style={styles.productBestSaleTitleText}>Sản phẩm bán chạy</Text>
            </View>
            <View style={styles.productBestSaleList}>
                <View style={styles.boxProductBestSaleItemStTwo}>
                    <View style={styles.pContainerStTwo}>
                        <View style={styles.pImgContentTwo}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfoStTwo}>
                            <Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.boxProductBestSaleItemStTwo}>
                    <View style={styles.pContainerStTwo}>
                        <View style={styles.pImgContentTwo}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfoStTwo}>
                            <Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.boxProductBestSaleItemStTwo}>
                    <View style={styles.pContainerStTwo}>
                        <View style={styles.pImgContentTwo}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfoStTwo}>
                            <Text style={styles.pName} numberOfLines={2}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.vmRed}>
                    <TouchableOpacity style={styles.vmRedButton}>
                        <Text style={styles.vmRedText}>Xem tất cả</Text>
                        <FontAwesome style={styles.vmRedIcon} name="angle-double-right" />
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const ComboHome = () => {
    return (
        <View style={styles.boxComboHome}>
            <View style={styles.boxComboHomeTitle}>
                <Text style={styles.boxComboHomeTitleText}>Combo dành cho bạn</Text>
            </View>
            <View style={styles.boxComboHomeListCombo}>
                <ScrollView horizontal={true}>
                    <TouchableOpacity style={[styles.boxComboHomeListComboItem, styles.boxComboHomeListComboItemActive]}>
                        <Image style={styles.boxComboHomeListComboItemImg} source={require('../assets/images/icon-combo.png')} />
                        <Text style={[styles.boxComboHomeListComboItemText, styles.boxComboHomeListComboItemTextActive]}>Combo 1</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxComboHomeListComboItem}>
                        <Image style={styles.boxComboHomeListComboItemImg} source={require('../assets/images/icon-combo.png')} />
                        <Text style={styles.boxComboHomeListComboItemText}>Combo 2</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxComboHomeListComboItem}>
                        <Image style={styles.boxComboHomeListComboItemImg} source={require('../assets/images/icon-combo.png')} />
                        <Text style={styles.boxComboHomeListComboItemText}>Combo 3</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxComboHomeListComboItem}>
                        <Image style={styles.boxComboHomeListComboItemImg} source={require('../assets/images/icon-combo.png')} />
                        <Text style={styles.boxComboHomeListComboItemText}>Combo 4</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.boxComboHomeListComboItem, styles.boxComboHomeListComboItemLast]}>
                        <Image style={styles.boxComboHomeListComboItemImg} source={require('../assets/images/icon-combo.png')} />
                        <Text style={styles.boxComboHomeListComboItemText}>Combo 5</Text>
                    </TouchableOpacity>
                </ScrollView>
            </View>
            <View style={styles.boxComboHomeListComboContent}>
                <ScrollView horizontal={true}>
                    <View style={[styles.boxProductHotItem, styles.boxProductHotItemLast]}>
                        <View style={styles.pContainer}>
                            <View style={styles.pImgContent}>
                                <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            </View>
                            <View style={styles.pInfo}>
                                <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                                <Text style={styles.pPrice}>1.292.000đ</Text>
                            </View>
                        </View>
                    </View>
                    <View style={[styles.boxProductHotItem, styles.boxProductHotItemLast]}>
                        <View style={styles.pContainer}>
                            <View style={styles.pImgContent}>
                                <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            </View>
                            <View style={styles.pInfo}>
                                <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                                <Text style={styles.pPrice}>1.292.000đ</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
            <View style={styles.boxComboHomeTotalPrice}>
                <Text style={styles.boxComboHomeTotalPriceSum}>=</Text>
                <View style={styles.boxComboHomeTotalPriceCotent}>
                    <Text style={styles.boxComboHomeTotalPriceOldPrice}>1.057.000đ</Text>
                    <View style={styles.boxComboHomeTotalPriceAll}>
                        <Text style={styles.boxComboHomeTotalPriceAllText}>Giá Combo: </Text>
                        <Text style={styles.boxComboHomeTotalPriceAllNum}>985.000đ</Text>
                    </View>
                    <Text style={styles.boxComboHomeTotalPriceDiscount}>Tiết kiệm 199.000đ</Text>
                </View>
                <TouchableOpacity style={styles.boxComboHomeTotalPriceButton}>
                    <Text style={styles.boxComboHomeTotalPriceButtonText}>Mua combo</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const ProductHome = () => {
    return (
        <View style={styles.boxProductHome}>
            <View style={styles.boxProductHomeListCat}>
                <ScrollView horizontal={true}>
                    <TouchableOpacity style={styles.boxProductHomeListCatItem}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro1.png')} />
                        <Text style={[styles.boxProductHomeListCatText, styles.boxProductHomeListCatTextActive]}>Thiết bị nhà bếp</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxProductHomeListCatItem}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro2.png')} />
                        <Text style={styles.boxProductHomeListCatText}>Đồ gia dụng</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxProductHomeListCatItem}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro3.png')} />
                        <Text style={styles.boxProductHomeListCatText}>Điện gia dụng</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxProductHomeListCatItem}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro4.png')} />
                        <Text style={styles.boxProductHomeListCatText}>Điều hòa</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.boxProductHomeListCatItem}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro5.png')} />
                        <Text style={styles.boxProductHomeListCatText}>Khẩu trang vải</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.boxProductHomeListCatItem, styles.boxProductHomeListCatItemLast]}>
                        <Image style={styles.boxProductHomeListCatImg} source={require('../assets/images/icon-pro6.png')} />
                        <Text style={styles.boxProductHomeListCatText}>Deal hot</Text>
                    </TouchableOpacity>
                </ScrollView>
            </View>
            <View style={styles.boxProductHomeList}>
                <View style={styles.boxProductHomeItem}>
                    <View style={styles.pContainer}>
                        <View style={styles.pImgContent}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfo}>
                            <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={[styles.boxProductHomeItem, styles.boxProductHomeItemChan]}>
                    <View style={styles.pContainer}>
                        <View style={styles.pImgContent}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfo}>
                            <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.boxProductHomeItem}>
                    <View style={styles.pContainer}>
                        <View style={styles.pImgContent}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfo}>
                            <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={[styles.boxProductHomeItem, styles.boxProductHomeItemChan]}>
                    <View style={styles.pContainer}>
                        <View style={styles.pImgContent}>
                            <Image style={styles.pNew} source={require('../assets/images/icon_new.png')} />
                            <Image style={styles.pImg} source={require('../assets/images/pro.png')} />
                            <Image style={styles.pTraGop} source={require('../assets/images/icon_tragop.png')} />
                        </View>
                        <View style={styles.pInfo}>
                            <Text style={styles.pName} numberOfLines={3}>Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L)</Text>
                            <Text style={styles.pPrice}>1.292.000đ</Text>
                            <View style={styles.pAllSale}>
                                <Text style={styles.pOldPrice}>1.634.000đ</Text>
                                <Text style={styles.pDiscount}>-30%</Text>
                            </View>
                            <View style={styles.pOffer}>
                                <Text style={styles.pOfferText}>*3 khuyến mãi trị giá </Text>
                                <Text style={styles.pOfferPrice}>500.000đ</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
            <View style={styles.vmRed}>
                <TouchableOpacity style={styles.vmRedButton}>
                    <Text style={styles.vmRedText}>Xem tất cả</Text>
                    <FontAwesome style={styles.vmRedIcon} name="angle-double-right" />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f2f2f2',
    },
    slider: {
        width: winWidth,
        height: winWidth - 20,
        paddingHorizontal: 10,
        position: 'relative',
        marginTop: 15,
    },
    sliderSwipper: {},
    imgSlider: {
        width: winWidth - 20,
        height: winWidth - 20,
    },
    boxCatHome: {
        width: winWidth,
        paddingHorizontal: 10,
        paddingVertical: 15,
    },
    boxCatHomeList: {
        paddingBottom: 8,
    },
    boxCatHomeItem: {
        width: 58,
        marginRight: 20,
        flexDirection: 'column',
        alignItems: 'center',
    },
    boxCatHomeItemLast: {
        marginRight: 0,
    },
    boxCatHomeItemImg: {
        width: 40,
        height: 40,
        borderRadius: 8,
        marginBottom: 10,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 3,
        },
        shadowOpacity: 0.27,
        shadowRadius: 4.65,
        elevation: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    boxCatHomeImg: {
        width: 28,
        height: 28,
    },
    boxCatHomeText: {
        textAlign: 'center',
        fontSize: 11,
        color: '#6A6A6A'
    },
    boxFlastSaleHome: {
        width: winWidth,
        marginBottom: 10,
        paddingBottom: 10,
    },
    boxFlastSaleHomeTitle: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
        backgroundColor: '#D8262F',
        alignItems: 'center'
    },
    boxFlastSaleHomeTitleImg: {
        width: 187,
        height: 59,
    },
    boxFlastSaleHomeTitleVm: {
        width: 104,
        height: 32,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 5,
    },
    boxFlastSaleHomeTitleVmText: {
        fontStyle: 'italic',
        color: '#D8262F',
        fontSize: 14,
    },
    boxFlastSaleHomeTitleVmIcon: {
        fontStyle: 'italic',
        color: '#D8262F',
        fontSize: 14,
    },
    boxFlastSaleHomeFirstItem: {
        padding: 10,
    },
    boxFlastSaleHomeImg: {
        width: '100%',
        height: winWidth - 20,
        position: 'relative',
        marginBottom: 15,
    },
    boxFlastSaleHomeImgCt: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    boxFlastSaleHomeFirstName: {
        fontSize: 18,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        color: '#000',
        marginBottom: 10,
    },
    boxFlastSaleHomeFirstAllPrice: {
        width: '100%',
        flexDirection: 'row',
        marginBottom: 10,
    },
    boxFlastSaleHomeFirstPrice: {
        width: '50%',
        paddingRight: 5,
    },
    boxFlastSaleHomeFirstPriceName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 8,
    },
    boxFlastSaleHomeFirstPriceText: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#D8262F'
    },
    boxFlastSaleHomeFirstPriceOld: {
        width: '50%',
        paddingLeft: 5,
    },
    boxFlastSaleHomeFirstOldPrice: {
        fontSize: 16,
        fontWeight: 'bold',
        textDecorationLine: 'line-through',
        marginBottom: 2,
    },
    boxFlastSaleHomeFirstDiscount: {
        paddingVertical: 5,
        backgroundColor: '#D8262F',
        width: 60,
        textAlign: 'center',
        color: '#fff',
        borderRadius: 5,
        overflow: 'hidden'
    },
    boxFlastSaleHomeFirstSaleQuan: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        paddingBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
        marginBottom: 10,
    },
    boxFlastSaleHomeFirstSaleQuanLeft: {
        width: '50%',
        paddingRight: 5,
    },
    boxFlastSaleHomeFirstSaleQuanLeftCt: {
        width: '100%',
        height: 15,
        borderRadius: 7.5,
        backgroundColor: '#FFE2E2',
        position: 'relative',
    },
    boxFlastSaleHomeFirstSaleQuanLeftDown: {
        position: 'absolute',
        width: '20%',
        top: 0,
        left: 0,
        backgroundColor: '#D8262F',
        zIndex: 2,
        height: 15,
        borderRadius: 7.5,
    },
    boxFlastSaleHomeFirstSaleQuanLeftText: {
        marginLeft: 10,
        fontSize: 10,
        color: '#fff',
        lineHeight: 15,
        position: 'relative',
        zIndex: 5,
    },
    boxFlastSaleHomeFirstSaleQuanRight: {
        width: '50%',
        paddingLeft: 5,
    },
    boxFlastSaleHomeFirstSaleQuanRightCt: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    boxFlastSaleHomeFirstSaleQuanRightText: {
        fontSize: 13,
    },
    boxFlastSaleHomeFirstSaleQuanRightTextRed: {
        fontSize: 13,
        color: '#D8262F',
        marginHorizontal: 5,
    },
    boxFlastSaleHomeFirstTime: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxFlastSaleHomeFirstTimeTitle: {
        fontSize: 14,
        width: 100,
    },
    boxFlastSaleHomeFirstTimeList: {
        width: winWidth - 120,
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxFlastSaleHomeFirstTimeItem: {
        width: 48,
        backgroundColor: '#3B3B3B',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
    },
    boxFlastSaleHomeFirstItemCt: {
        height: 34,
        backgroundColor: 'rgba(0,0,0,0)',
        width: '100%',
        borderBottomColor: 'rgba(255,255,255,0.3)',
        borderBottomWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    boxFlastSaleHomeFirstTimeNum: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#fff',
    },
    boxFlastSaleHomeFirstTimeText: {
        height: 30,
        lineHeight: 30,
        textTransform: 'uppercase',
        color: '#fff',
    },
    boxFlastSaleHomeFirstTimeTextChia: {
        marginHorizontal: 10,
        fontSize: 24,
    },
    boxFlastSaleHomeList: {
        paddingHorizontal: 10,
        marginTop: 10,
    },
    boxFlastSaleHomeListItem: {
        width: winWidth - 20,
        marginRight: 20,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 10,
        padding: 10,
        flexDirection: 'row',
    },
    boxFlastSaleHomeListItemLast: {
        marginRight: 0,
    },
    boxFlastSaleHomeListItemImg: {
        width: 113,
        height: 113,
        marginRight: 20,
        position: 'relative'
    },
    boxFlastSaleHomeListItemInfo: {
        width: winWidth - 175,
    },
    boxFlastSaleHomeListItemName: {
        fontSize: 14,
        marginBottom: 10,
    },
    boxFlastSaleHomeListItemPrice: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#D8262F',
        marginBottom: 5,
    },
    boxFlastSaleHomeListItemOldPriceAll: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    boxFlastSaleHomeListItemOldPrice: {
        fontSize: 14,
        color: '#A1A1A1',
        textDecorationLine: 'line-through',
    },
    boxFlastSaleHomeListItemDiscount: {
        paddingVertical: 5,
        backgroundColor: '#D8262F',
        width: 60,
        textAlign: 'center',
        color: '#fff',
        borderRadius: 5,
        overflow: 'hidden',
        marginLeft: 10,
    },
    boxProductHot: {
        width: winWidth,
        marginBottom: 10,
        backgroundColor: '#D8262F',
        position: 'relative',
    },
    bgProductHot: {
        width: winWidth,
        height: 200,
        position: 'absolute',
        zIndex: 1,
        top: 0,
        left: 0,
    },
    boxProductHotTitle: {
        paddingHorizontal: 10,
        textAlign: 'center',
        marginVertical: 15,
        fontSize: 20,
        textTransform: 'uppercase',
        color: '#fff',
        fontWeight: 'bold',
        position: 'relative',
        zIndex: 2,
    },
    boxProductHotList: {
        width: winWidth,
        paddingHorizontal: 10,
        backgroundColor: 'rgba(0,0,0,0)',
        position: 'relative',
        zIndex: 2,
        marginBottom: 20,
    },
    boxProductHotItem: {
        width: 180,
        marginRight: 10,
        borderRadius: 10,
        overflow: 'hidden',
    },
    boxProductHotItemLast: {
        marginRight: 0,
    },
    pContainer: {
        width: '100%',
        padding: 10,
    },
    pImgContent: {
        width: '100%',
        position: 'relative',
        paddingTop: '100%',
        marginBottom: 10,
    },
    pNew: {
        width: 24,
        height: 18,
        position: 'absolute',
        zIndex: 6,
        top: 0,
        left: 0,
    },
    pImg: {
        width: '100%',
        position: 'absolute',
        zIndex: 5,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    pTraGop: {
        width: 68,
        height: 16,
        position: 'absolute',
        zIndex: 6,
        bottom: 0,
        left: '50%',
        transform: [{ translateX: -34 }],
    },
    pInfo: {
        width: '100%',
    },
    pName: {
        width: '100%',
        fontSize: 14,
        marginBottom: 10,
    },
    pPrice: {
        width: '100%',
        fontSize: 18,
        marginBottom: 10,
        color: '#D8262F',
        fontWeight: 'bold',
    },
    pAllSale: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    pOldPrice: {
        color: '#A1A1A1',
        fontSize: 14,
        textDecorationLine: 'line-through',
    },
    pDiscount: {
        paddingVertical: 5,
        backgroundColor: '#D8262F',
        width: 50,
        textAlign: 'center',
        color: '#fff',
        borderRadius: 5,
        overflow: 'hidden',
        marginLeft: 5,
    },
    pOffer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    pOfferText: {
        fontSize: 10,
        color: '#A1A1A1',
    },
    pOfferPrice: {
        fontSize: 10,
        color: '#D8262F',
    },
    vmWhite: {
        width: '100%',
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    vmWhiteButton: {
        width: 104,
        height: 32,
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    vmWhiteText: {
        fontSize: 14,
        fontStyle: 'italic',
        color: '#fff',
        marginRight: 10,
    },
    vmWhiteIcon: {
        fontSize: 14,
        fontStyle: 'italic',
        color: '#fff',
    },
    productBestSale: {
        marginBottom: 20,
        paddingHorizontal: 10,
        backgroundColor: '#f2f2f2',
        position: 'relative',
        width: winWidth,
    },
    productBestSaleTitle: {
        width: winWidth - 20,
        height: 40,
        position: 'relative',
        zIndex: 5,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    productBestSaleTitleImg: {
        width: '100%',
        height: '100%',
    },
    productBestSaleTitleText: {
        width: 200,
        lineHeight: 40,
        fontSize: 22,
        fontWeight: 'bold',
        color: '#fff',
        textTransform: 'uppercase',
        position: 'absolute',
        zIndex: 2,
        top: 0,
        left: '50%',
        transform: [{ translateX: -100 }],
        textAlign: 'center',
        fontStyle: 'italic',
    },
    productBestSaleList: {
        borderWidth: 1,
        borderColor: '#D8262F',
        borderRadius: 10,
        overflow: 'hidden',
        marginTop: -20,
        paddingTop: 30,
    },
    boxProductBestSaleItemStTwo: {
        width: '100%',
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
    },
    pContainerStTwo: {
        flexDirection: 'row',
        padding: 10,
    },
    pImgContentTwo: {
        width: 111,
        height: 111,
        marginRight: 20,
        position: 'relative',
    },
    pInfoStTwo: {
        width: winWidth - 175,
    },
    vmRed: {
        width: '100%',
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: 'rgba(0,0,0,0)',
        marginTop: 20,
    },
    vmRedButton: {
        width: 104,
        height: 32,
        borderRadius: 5,
        borderColor: '#D8262F',
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    vmRedText: {
        fontSize: 14,
        fontStyle: 'italic',
        color: '#D8262F',
        marginRight: 10,
    },
    vmRedIcon: {
        fontSize: 14,
        fontStyle: 'italic',
        color: '#D8262F',
    },
    boxComboHome: {
        width: winWidth,
        marginBottom: 20,
    },
    boxComboHomeTitle: {
        padding: 10,
    },
    boxComboHomeTitleText: {
        fontSize: 22,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        color: '#D8262F',
        fontStyle: 'italic',
    },
    boxComboHomeListCombo: {
        padding: 10,
        width: winWidth,
        backgroundColor: '#f2f2f2',
    },
    boxComboHomeListComboItem: {
        width: 80,
        height: 56,
        marginRight: 10,
        borderRadius: 10,
        overflow: 'hidden',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    boxComboHomeListComboItemActive: {
        backgroundColor: '#D8262F',
    },
    boxComboHomeListComboItemLast: {
        marginRight: 0,
    },
    boxComboHomeListComboItemImg: {
        width: 28,
        height: 28,
    },
    boxComboHomeListComboItemText: {
        fontWeight: '500',
    },
    boxComboHomeListComboItemTextActive: {
        color: '#fff',
    },
    boxComboHomeListComboContent: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 10,
    },
    boxComboHomeTotalPrice: {
        width: winWidth,
        padding: 10,
        borderTopWidth: 1,
        borderTopColor: '#e1e1e1',
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxComboHomeTotalPriceSum: {
        width: 40,
        fontSize: 40,
        color: '#999'
    },
    boxComboHomeTotalPriceCotent: {
        width: winWidth - 180,
    },
    boxComboHomeTotalPriceOldPrice: {
        fontSize: 14,
        color: '#A1A1A1',
        textDecorationLine: 'line-through',
        marginBottom: 5,
    },
    boxComboHomeTotalPriceAll: {
        flexDirection: 'row',
        marginBottom: 5,
        alignItems: 'flex-end',
    },
    boxComboHomeTotalPriceAllText: {
        marginRight: 8,
    },
    boxComboHomeTotalPriceAllNum: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#D8262F',
    },
    boxComboHomeTotalPriceDiscount: {
        color: '#D8262F',
    },
    boxComboHomeTotalPriceButton: {
        width: 120,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#D8262F',
        borderRadius: 10,
    },
    boxComboHomeTotalPriceButtonText: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
    },
    boxProductHome: {
        marginBottom: 20,
        backgroundColor: '#f2f2f2'
    },
    boxProductHomeListCat: {
        width: winWidth,
        padding: 10,
    },
    boxProductHomeListCatItem: {
        width: 58,
        marginRight: 20,
        flexDirection: 'column',
        alignItems: 'center',
    },
    boxProductHomeListCatItemLast: {
        marginRight: 0,
    },
    boxProductHomeListCatImg: {
        marginBottom: 5,
    },
    boxProductHomeListCatText: {
        textAlign: 'center',
    },
    boxProductHomeListCatTextActive: {
        color: '#D8262F'
    },
    boxProductHomeList: {
        width: winWidth,
        paddingHorizontal: 10,
        paddingTop: 10,
        backgroundColor: '#f2f2f2',
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
    },
    boxProductHomeItem: {
        width: winWidth/2 - 15,
        marginRight: 10,
        marginBottom: 10,
        borderRadius: 10,
        overflow: 'hidden'
    },
    boxProductHomeItemChan: {
        marginRight: 0,
    }
});