Hanoicomputer_App/screens/TabTwoScreen.tsx

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 } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import Swiper from 'react-native-swiper';
import styled from 'styled-components';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
import { ShowProductItem } from '../components/product/productItem';
import ProductDetail from '../screens/ProductDetail';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import TabOneScreen from './TabOneScreen';
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();


export default function TabTwoScreen() {

    const [showFilter, setFilter] = useState(false);


    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}>Laptop, Máy Tính Xách Tay</Text>
                </View>

                <View style={styles.listCategoryChild}>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop Asus</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop Dell</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop HP</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop Lenovo</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop Acer</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.listCategoryChildItem} onPress={() => Alert.alert('danh muc sp')}>
                        <Text style={styles.listCategoryChildName}>Laptop MSI</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.listFilter}>
                    <FilterBrand />
                    <FilterPrice />
                </View>

                <ShowProductListCategory />

                <Paging />

                <ProductCategorySummary />

                <PolicyFooter />

                <Social />

                <ShowroomList />

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

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

type ItemTyep = {id:string, title: string}

const FilterBrand = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const dataBrandFilter = [
        {
            url: '/',
            name: 'Acer',
        },
        {
            url: '/',
            name: 'Asus',
        },
        {
            url: '/',
            name: 'HP',
        },
        {
            url: '/',
            name: 'Dell',
        },
        {
            url: '/',
            name: 'Apple',
        },
    ]
    return (
        <View style={styles.filterBox}>
            <TouchableOpacity style={styles.filterBoxTitle} onPress={() => setModalVisible(true)}>
                <Text style={styles.filterBoxTitleName}>Thứ tự sản phẩm</Text>
                <FontAwesome style={styles.filterBoxTitleIcon} name="caret-down" />
            </TouchableOpacity>
            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
                <Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.filterItemContent}>
                    <View style={styles.filterItemList}>
                        <View style={styles.filterItemListTitle}>
                            <Text style={styles.filterItemListTitleName}>Hãng sản xuất</Text>
                            <Pressable onPress={() => setModalVisible(!modalVisible)}>
                                <FontAwesome style={styles.filterItemListClose} name="times" />
                            </Pressable>
                        </View>
                        <ScrollView>
                            {
                                dataBrandFilter.map((item , index) =>
                                    <FilterItem key={index} name={item.name} />
                                )
                            }
                        </ScrollView>
                    </View>
                </Pressable>
            </Modal>
        </View>
    )
}

const FilterPrice = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const dataPriceFilter = [
        {
            url: '/',
            name: '1000000',
        },
        {
            url: '/',
            name: '2000000',
        },
        {
            url: '/',
            name: '3000000',
        },
        {
            url: '/',
            name: '4000000',
        },
        {
            url: '/',
            name: '5000000',
        },
    ]
    return (
        <View style={styles.filterBox}>
            <TouchableOpacity style={styles.filterBoxTitle} onPress={() => setModalVisible(true)}>
                <Text style={styles.filterBoxTitleName}>Khoảng giá</Text>
                <FontAwesome style={styles.filterBoxTitleIcon} name="caret-down" />
            </TouchableOpacity>
            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
                <Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.filterItemContent}>
                    <View style={styles.filterItemList}>
                        <View style={styles.filterItemListTitle}>
                            <Text style={styles.filterItemListTitleName}>Khoảng giá</Text>
                            <Pressable onPress={() => setModalVisible(!modalVisible)}>
                                <FontAwesome style={styles.filterItemListClose} name="times" />
                            </Pressable>
                        </View>
                        <ScrollView>
                            {
                                dataPriceFilter.map((item , index) =>
                                    <FilterItem key={index} name={item.name} />
                                )
                            }
                        </ScrollView>
                    </View>
                </Pressable>
            </Modal>
        </View>
    )
}

const FilterItem = (props: { name: string }) => {
    const { name } = props;
    return (
        <Pressable style={styles.filterItem} onPress={() => Alert.alert('danh muc sp')}>
            <Text style={styles.filterItemName}>{name}</Text>
        </Pressable>
    );
}

const ShowProductListCategory = () => {

    const itemProductStyle = {
        width: halfWinWidth,
        borderBottomWidth: 1,
        borderBottomColor: '#e8e8e8',
        borderRightWidth: 1,
        borderRightColor: '#e8e8e8',
    }
    const productData = [
        {
            id: 1,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 2,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 25000000,
            marketPrice: 50000000,
            quantity: 0,
        },
        {
            id: 3,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 35000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 4,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 40000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 5,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
    ]

    return (
        <View style={styles.boxProductCategory}>
            <View style={styles.listProductCategory}>
                {
                    productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
                        productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
                    />)
                }
            </View>
        </View>
    )
}

const Paging = () => {

    const pagingData = [
        {
            url: '/',
            name: 1,
            isCurrent: 1,
        },
        {
            url: '/',
            name: 2,
            isCurrent: 0,
        },
        {
            url: '/',
            name: 3,
            isCurrent: 0,
        },
        {
            url: '/',
            name: 4,
            isCurrent: 0,
        },
        {
            url: '/',
            name: 5,
            isCurrent: 0,
        }
    ]

    return (
        <View style={styles.boxPaging}>
            <View style={styles.boxPagingList}>
                {
                    pagingData.map((item, index) => 
                        <Pressable key={index} style={item.isCurrent == 1 ? styles.boxPagingItemCurrent : styles.boxPagingItem} onPress={() => Alert.alert('page')}>
                            <Text style={item.isCurrent == 1 ? styles.boxPagingItemCurrentText : styles.boxPagingItemText}>{item.name}</Text>
                        </Pressable>
                    )
                }
            </View>
        </View>
    )
}

const ProductCategorySummary = () => {
    return(
        <View style={styles.boxProductCategorySummary}>
            <Text>NHỮNG ĐIỀU CẦN LƯU Ý KHI CHỌN MUA LAPTOP</Text>
            <Text>Để có thể sở hữu được một sản phẩm chất lượng và ưng ý nhất thì bạn cần xem xét các yếu tố như sau khi mua laptop:</Text>
            <Text>Tốt nhất là bạn nên lựa chọn những laptop có thương hiệu nổi tiếng. Điều này phần nào đã chứng minh được chất lượng của laptop. Những thương hiệu được nhiều người ưa chuộng trong thời gian dài thì chắc chắn là sản phẩm có các ưu điểm nổi bật, mang đến nhiều giá trị tối ưu cho người dùng khi sử dụng sản phẩm. Khi đã chọn các thương hiệu nổi tiếng thì hàng chính hãng cũng là điều bạn nên đặc biệt quan tâm bởi vì hàng giả, hàng nhái hiện nay trên thị trường có rất nhiều</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    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
    },
    listCategoryChild: {
        width: winWidth,
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        paddingLeft: 10,
        paddingRight: 10,
    },
    listCategoryChildItem: {
        width: halfWinWidth - 15,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        height: 36,
        backgroundColor: '#243a76',
        marginBottom: 10,
        borderRadius: 5,
    },
    listCategoryChildName: {
        color: '#fff',
        fontSize: 14,
    },
    listFilter: {
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    filterBox: {
        width: halfWinWidth - 15,
        position: 'relative',
        marginBottom: 10,
        zIndex: -1,
    },
    filterBox1: {
        zIndex: 1,
    },
    filterBoxTitle: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        height: 36,
        backgroundColor: '#dcdcdc',
        borderRadius: 5,
        paddingLeft: 10,
        paddingRight: 10,
        zIndex: 1,
        position: 'relative',
    },
    filterItemListTitleName: {
        fontSize: 16,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        color: '#222',
    },
    filterItemListClose: {
        fontSize: 16,
    },
    filterBoxTitleName: {
    },
    filterBoxTitleIcon: {},
    filterItemContent: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
        position: 'relative',
        zIndex: 1,
    },
    filterItemList: {
        width: winWidth - 30,
        maxWidth: 300,
        height: 450,
        backgroundColor: '#fff',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 2.22,
        shadowRadius: 2.22,
        elevation: 3,
        borderRadius: 5,
        overflow: 'hidden',
        position: 'relative',
        zIndex: 2,
    },
    filterItemListTitle: {
        height: 40,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
        paddingLeft: 10,
        paddingRight: 10,
        marginBottom: 10,
    },
    filterItem: {
        width: '100%',
        height: 30,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        flexDirection: 'row',
    },
    filterItemName: {},
    boxProductCategory: {
        width: winWidth,
    },
    listProductCategory: {
        flexWrap: 'wrap',
        display: 'flex',
        flexDirection: 'row',
        marginTop: 10,
        borderTopColor: '#e8e8e8',
        borderTopWidth: 1,
    },
    boxPaging: {
        width: winWidth,
        marginTop: 20,
        marginBottom: 20,
    },
    boxPagingList: {
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    boxPagingItemCurrent: {
        paddingHorizontal: 8,
        paddingVertical: 5,
        lineHeight: 16,
        marginHorizontal: 2,
        borderWidth: 1,
        borderColor: '#bbb',
        borderRadius: 3,
        backgroundColor: '#243a76'
    },
    boxPagingItem: {
        paddingHorizontal: 8,
        paddingVertical: 5,
        lineHeight: 16,
        marginHorizontal: 2,
        borderWidth: 1,
        borderColor: '#bbb',
        borderRadius: 3,
    },
    boxPagingItemCurrentText: {
        color: '#fff',
        fontSize: 14,
    },
    boxPagingItemText: {
        color: '#333',
        fontSize: 14,
    },
    boxProductCategorySummary: {
        paddingLeft: 10,
        paddingRight: 10,
        marginBottom: 20,
    },
});