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 { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
import { ShowProductItem } from '../components/product/productItem';
import { Text, View, } from '../components/Themed';

export default function SearchProduct() {

    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}>Tìm kiếm</Text>
                </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,
    },
});