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

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

export default function BuildPc() {
    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}>Build PC</Text>
                </View>

                <BuildPcBox />

                <ProductOtherBuildPc />

                <PolicyFooter />

                <Social />

                <ShowroomList />

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

const BuildPcBox = () => {
    return (
        <View style={styles.boxBuildPc}>
            <Text style={styles.boxBuildPcTitle}>Xây dựng máy tính</Text>
            <View style={styles.boxBuildPcBanner}>
                <Image style={styles.boxBuildPcBannerImg} source={{ uri: 'https://www.hanoicomputer.vn/media/lib/huong-dan-xay-dung-cau-hinh-250420.png' }} />
            </View>
            <Text style={styles.boxBuildPcNote}>Chọn linh kiện xây dựng cấu hình</Text>
            <View style={styles.listConfig}>
                <Pressable style={[styles.listConfigItem, styles.listConfigItemActive]}>
                    <Text style={[styles.listConfigItemText, styles.listConfigItemTextActive]}>Cấu hình 1</Text>
                </Pressable>
                <Pressable style={styles.listConfigItem}>
                    <Text style={styles.listConfigItemText}>Cấu hình 2</Text>
                </Pressable>
                <Pressable style={styles.listConfigItem}>
                    <Text style={styles.listConfigItemText}>Cấu hình 3</Text>
                </Pressable>
                <Pressable style={styles.listConfigItem}>
                    <Text style={styles.listConfigItemText}>Cấu hình 4</Text>
                </Pressable>
                <Pressable style={styles.listConfigItem}>
                    <Text style={styles.listConfigItemText}>Cấu hình 5</Text>
                </Pressable>
            </View>
            <View>
                <Pressable style={styles.boxBuildPcReload}>
                    <Text style={styles.boxBuildPcReloadText}>Làm mới</Text>
                    <FontAwesome style={styles.boxBuildPcReloadIcon} name="refresh" />
                </Pressable>
            </View>
            <View>
                <Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
            </View>

            <BuildPcListStore />

            <ListItemBuildPc />
            <View>
                <Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
            </View>
            <View>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>Lưu cấu hình</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="floppy-o" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>tải file excel cấu hình</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="file-excel-o" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>tải ảnh cấu hình</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>chia sẻ cấu hình</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>Xem & in</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonBuildPcFt}>
                    <Text style={styles.buttonBuildPcFtText}>Thêm vào giỏ hàng</Text>
                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="shopping-cart" />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const BuildPcListStore = () => {
    const [checked, setChecked] = React.useState('store1');
    const listStore = [
        {
            id: 1,
            name: '01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội'
        },
        {
            id: 2,
            name: '02: 43 Thái Hà - Q. Đống Đa - Hà Nội'
        },
        {
            id: 3,
            name: '03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng'
        },
        {
            id: 4,
            name: '04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội'
        },
        {
            id: 5,
            name: '05: 511 Quang Trung - Q. Hà Đông - Hà Nội'
        },
        {
            id: 6,
            name: '06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM'
        },
        {
            id: 7,
            name: '07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội'
        },
        {
            id: 8,
            name: '08: 299 Minh Khai - Từ Sơn - Bắc Ninh'
        },
    ]
    return (
        <View style={styles.boxStore}>
            <View style={styles.boxStoreItem}>
                <View style={styles.boxStoreItemCheck}>
                    <RadioButton color={'#243a76'} value={'store0'} status={checked === 'store0' ? 'checked' : 'unchecked'} onPress={() => setChecked('store0')} />
                </View>
                <Text style={styles.boxStoreItemText}>Tất cả kho</Text>
            </View>
            {
                listStore.map(item => {
                    const value = 'store' + item.id;
                    return (
                        <View key={item.id} style={styles.boxStoreItem}>
                            <View style={styles.boxStoreItemCheck}>
                                <RadioButton color={'#243a76'} value={value} status={checked === value ? 'checked' : 'unchecked'} onPress={() => setChecked(value)} />
                            </View>
                            <Text style={styles.boxStoreItemText}>{item.name}</Text>
                        </View>
                    )
                })
            }
        </View>
    )
}

const ListItemBuildPc = () => {
    const dataListItem = [
        {
            id: 1,
            name: 'Bộ vi xử lý',
        },
        {
            id: 2,
            name: 'Bo mạch chủ',
        },
        {
            id: 3,
            name: 'RAM',
        },
        {
            id: 4,
            name: 'HDD',
        },
        {
            id: 5,
            name: 'SSD',
        },
        {
            id: 6,
            name: 'VGA',
        },
        {
            id: 7,
            name: 'Nguồn',
        },
        {
            id: 8,
            name: 'Vỏ Case',
        },
        {
            id: 9,
            name: 'Màn hình',
        },
        {
            id: 10,
            name: 'Bàn phám, Chuột',
        },
        {
            id: 11,
            name: 'Bàn phím',
        },
        {
            id: 12,
            name: 'Chuột',
        },
        {
            id: 13,
            name: 'Tai nghe',
        },
        {
            id: 14,
            name: 'Loa',
        },
        {
            id: 15,
            name: 'Ghế gamming',
        },
        {
            id: 16,
            name: 'Quạt làm mát',
        },
        {
            id: 17,
            name: 'Tản nhiệt nước All in One',
        },
        {
            id: 18,
            name: 'Tản nhiệt nước custom',
        },
        {
            id: 19,
            name: 'Tản nhiệt khí',
        },
        {
            id: 20,
            name: 'Windows bản quyền',
        },
        {
            id: 21,
            name: 'Phần mềm Antivirus',
        },
    ];
    const [modalVisible, setModalVisible] = useState(false);
    return (
        <View style={styles.itemBuildPCList}>
            {
                dataListItem.map((item, index) => {
                    return (
                        <View style={styles.itemBuildPC} key={index}>
                            <Text style={styles.itemBuildPCText}>{index + 1}. {item.name}</Text>
                            <Pressable style={styles.itemBuildPCShowPop} onPress={() => setModalVisible(true)}>
                                <Text style={styles.itemBuildPCShowPopText}>+</Text>
                            </Pressable>
                        </View>
                    )
                })
            }
            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
                <View style={styles.itemBuildPCPop}>
                    <View style={styles.headerPopBuildPC}>
                        <View style={styles.headerPopBuildPCContentSt}>
                            <Text style={styles.headerPopBuildPCTitle}>Chọn linh kiện</Text>
                            <Pressable style={styles.itemBuildPCPopClose} onPress={() => setModalVisible(!modalVisible)}>
                                <FontAwesome style={styles.itemBuildPCPopCloseIcon} name="times" />
                            </Pressable>
                        </View>
                        <View style={styles.headerPopBuildPCContentNd}>
                            <SearchPopBuildPc />
                            <FilterPopBuildPc />
                        </View>
                        <View style={styles.headerPopBuildPCContentRd}>
                            <View style={styles.headerPopBuildPCContentRdTop}>
                                <SortProBuildPc />
                                <WarehouseProBuildPc />
                            </View>
                            <PagingProBuildPc />
                        </View>
                    </View>
                    <ScrollView>
                        <ProductBuildPC />
                    </ScrollView>
                </View>
            </Modal>
        </View>
    )
}

const SearchPopBuildPc = () => {
    return (
        <View style={styles.headerPopBuildPCSearch}>
            <TextInput style={styles.headerPopBuildPCSearchInput} placeholder="Bạn cần tìm linh kiện gì?" />
            <Pressable style={styles.headerPopBuildPCSearchButton}>
                <FontAwesome style={styles.headerPopBuildPCSearchIcon} name="search" />
            </Pressable>
        </View>
    )
}

const FilterPopBuildPc = () => {
    const [openFilter, setopenFilter] = useState(true);
    return (
        <View style={styles.headerPopBuildPCContentFilter}>
            <TouchableOpacity style={styles.headerPopBuildPCFilter} onPress={() => setopenFilter(!openFilter)}>
                <Ionicons style={styles.headerPopBuildPCFinterIcon} name="funnel-outline" />
                <Text style={styles.headerPopBuildPCFinterText}>Lọc</Text>
            </TouchableOpacity>
            <View style={openFilter ? styles.headerPopBuildPCContentFilterShowHide : styles.headerPopBuildPCContentFilterShow}>
                <Text style={styles.headerPopBuildPCContentFilterTitle}>Lọc sản phẩm theo</Text>
                <ScrollView style={{ maxHeight: 400, }}>
                    <FinterBuildPcItem />
                    <FinterBuildPcItem />
                    <FinterBuildPcItem />
                    <FinterBuildPcItem />
                </ScrollView>
            </View>
        </View>
    )
}

const FinterBuildPcItem = () => {
    const [checkedFilter, setCheckedFilter] = useState(false);
    return (
        <View style={styles.headerPopBuildPCContentFilterBox}>
            <Text style={styles.headerPopBuildPCContentFilterName}>Hãng sản xuất</Text>
            <View style={styles.headerPopBuildPCContentFilterList}>
                <View style={styles.headerPopBuildPCContentFilterItem}>
                    <View style={styles.headerPopBuildPCContentFilterCheck}>
                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
                    </View>
                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
                </View>
                <View style={styles.headerPopBuildPCContentFilterItem}>
                    <View style={styles.headerPopBuildPCContentFilterCheck}>
                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
                    </View>
                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
                </View>
                <View style={styles.headerPopBuildPCContentFilterItem}>
                    <View style={styles.headerPopBuildPCContentFilterCheck}>
                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
                    </View>
                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
                </View>
                <View style={styles.headerPopBuildPCContentFilterItem}>
                    <View style={styles.headerPopBuildPCContentFilterCheck}>
                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
                    </View>
                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
                </View>
            </View>
        </View>
    );
}

const SortProBuildPc = () => {
    const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
    return (
        <View style={styles.headerPopBuildPCContentSelect}>
            <Text style={styles.headerPopBuildPCContentSelectTite}>Sắp Xếp</Text>
            <TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
                <Text style={styles.headerPopBuildPCContentSelectBoxText}>Tùy chọn</Text>
                <FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
            </TouchableOpacity>
            <View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poLeft] : [styles.headerPopBuildPCContentSelectList, styles.poLeft, styles.active]}>
                <Text style={styles.headerPopBuildPCContentSelectItem}>Mới nhất</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>Giá tăng dần</Text>
            </View>
        </View>
    )
}

const WarehouseProBuildPc = () => {
    const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
    return (
        <View style={styles.headerPopBuildPCContentSelect}>
            <Text style={styles.headerPopBuildPCContentSelectTite}>Kho hàng</Text>
            <TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
                <Text style={styles.headerPopBuildPCContentSelectBoxText}>Tất cả</Text>
                <FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
            </TouchableOpacity>
            <View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poRight] : [styles.headerPopBuildPCContentSelectList, styles.poRight, styles.active]}>
                <Text style={styles.headerPopBuildPCContentSelectItem}>01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>02: 43 Thái Hà - Q. Đống Đa - Hà Nội</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>05: 511 Quang Trung - Q. Hà Đông - Hà Nội</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội</Text>
                <Text style={styles.headerPopBuildPCContentSelectItem}>08: 299 Minh Khai - Từ Sơn - Bắc Ninh</Text>
            </View>
        </View>
    )
}

const PagingProBuildPc = () => {
    return (
        <View style={styles.pagingBuildPc}>
            <TouchableOpacity style={[styles.pagingBuildPcItem, styles.pagingBuildPcItemActive]}>
                <Text style={[styles.pagingBuildPcText, styles.pagingBuildPcTextActive]}>1</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>2</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>3</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>4</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>5</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>6</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.pagingBuildPcItem}>
                <Text style={styles.pagingBuildPcText}>7</Text>
            </TouchableOpacity>
        </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 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,
        warrantry: '36 Tháng',
    },
    {
        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,
        warrantry: '36 Tháng',
    },
    {
        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,
        warrantry: '36 Tháng',
    },
    {
        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,
        warrantry: '36 Tháng',
    },
    {
        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,
        warrantry: '36 Tháng',
    },
]

const ProductBuildPC = () => {

    return (
        <View style={styles.boxPrductBuildPc}>
            <View style={styles.boxPrductBuildPcList}>
                {
                    productData.map((item, index) => {
                        if (index < 5) {
                            return (
                                <View style={styles.boxPrductBuildPcItem} key={index}>
                                    <View style={styles.boxPrductBuildPcImg}>
                                        <Image style={styles.boxPrductBuildPcImgCt} source={{ uri: item.productImage.large }} />
                                    </View>
                                    <View style={styles.boxPrductBuildPcInfo}>
                                        <Text style={styles.boxPrductBuildPcName} numberOfLines={2}>{item.productName}</Text>
                                        <View style={styles.boxPrductBuildPcOtherText}>
                                            <Text style={styles.boxPrductBuildPcOtherTextSt}>Mã SP:</Text>
                                            <Text style={styles.boxPrductBuildPcOtherTextNd}>{item.productSKU}</Text>
                                        </View>
                                        <View style={styles.boxPrductBuildPcOtherText}>
                                            <Text style={styles.boxPrductBuildPcOtherTextSt}>Bảo hành:</Text>
                                            <Text style={styles.boxPrductBuildPcOtherTextNd}>{item.warrantry}</Text>
                                        </View>
                                        <View style={styles.boxPrductBuildPcOtherText}>
                                            <Text style={styles.boxPrductBuildPcQuantity}>Kho hàng:</Text>
                                            {
                                                item.quantity == 0
                                                    ? <View style={styles.boxPrductBuildPcQuantityNo}>
                                                        <FontAwesome style={styles.boxPrductBuildPcQuantityNoIcon} name="phone" />
                                                        <Text style={styles.boxPrductBuildPcQuantityNoText}>Liên hệ</Text>
                                                    </View>
                                                    : <View style={styles.boxPrductBuildPcQuantityHas}>
                                                        <FontAwesome style={styles.boxPrductBuildPcQuantityHasIcon} name="check" />
                                                        <Text style={styles.boxPrductBuildPcQuantityHasText}>Còn hàng</Text>
                                                    </View>
                                            }
                                        </View>
                                        <Text style={styles.boxPrductBuildPcPrice}>{formatCurrency(item.price)} đ</Text>
                                    </View>
                                    <Pressable style={styles.boxPrductBuildPcSelec}>
                                        {
                                            item.quantity == 0
                                                ? <View style={styles.boxPrductBuildPcSelecNo}>
                                                    <FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="ban" />
                                                </View>
                                                : <View style={styles.boxPrductBuildPcSelecYes}>
                                                    <FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="plus" />
                                                </View>
                                        }
                                    </Pressable>
                                </View>
                            )
                        }
                    })
                }
            </View>
        </View>
    )
}

const ProductOtherBuildPc = () => {
    const itemProductStyle = {
        width: '100%',
        flexDirection: 'column',
    }
    return (
        <View style={styles.ProductOtherBuildPc}>
            <Text style={styles.ProductOtherBuildPcTitle}>Cấu hình tham khảo</Text>
            <View style={styles.ProductOtherBuildPcList}>
                <Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
                    {
                        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}
                        />)
                    }
                </Swiper>
            </View>
            <View>
                <TouchableOpacity style={styles.ProductOtherBuildPcButton}>
                    <Text style={styles.ProductOtherBuildPcButtonText}>Xem thêm 19 sản phẩm</Text>
                    <FontAwesome style={styles.ProductOtherBuildPcButtonIcon} name="caret-right" />
                </TouchableOpacity>
            </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
    },
    boxBuildPc: {
        paddingHorizontal: 10,
        width: winWidth,
        marginBottom: 30,
    },
    boxBuildPcTitle: {
        width: '100%',
        marginBottom: 20,
        fontSize: 22,
        fontWeight: 'bold',
        textTransform: 'uppercase',
        textAlign: 'center',
        color: '#ed1b24',
    },
    boxBuildPcBanner: {
        marginBottom: 20,
        width: '100%',
        height: 72,
        position: 'relative',
    },
    boxBuildPcBannerImg: {
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    boxBuildPcNote: {
        marginBottom: 20,
        textAlign: 'center',
        color: '#2d3877',
        fontSize: 15,
        fontWeight: 'bold',
    },
    listConfig: {
        flexDirection: 'row',
        marginBottom: 20,
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingBottom: 20,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
    },
    listConfigItem: {
        width: '48%',
        marginBottom: 10,
        flexDirection: 'row',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#d9d9d9',
        borderRadius: 3,
    },
    listConfigItemText: {
        color: '#333',
        textTransform: 'uppercase'
    },
    listConfigItemActive: {
        backgroundColor: '#2d3877',
    },
    listConfigItemTextActive: {
        color: '#fff',
    },
    boxBuildPcReload: {
        width: 126,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
        backgroundColor: '#2d3877',
        marginBottom: 20,
    },
    boxBuildPcReloadText: {
        color: '#fff',
        textTransform: 'uppercase',
        marginRight: 10,
    },
    boxBuildPcReloadIcon: {
        color: '#fff',
    },
    boxBuildPcTotalPrice: {
        textAlign: 'right'
    },
    boxBuildPcTotalPriceNum: {
        fontWeight: 'bold',
        color: 'red'
    },
    boxStore: {
        marginBottom: 20,
        paddingBottom: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1'
    },
    boxStoreItem: {
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    boxStoreItemCheck: {
        width: 36,
        height: 36,
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#666',
        marginRight: 10,
    },
    boxStoreItemText: {
        width: winWidthP10 - 46,
    },
    itemBuildPCList: {},
    itemBuildPC: {
        marginBottom: 10,
        paddingBottom: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1'
    },
    itemBuildPCText: {},
    itemBuildPCShowPop: {
        width: 50,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
        backgroundColor: '#243a76',
    },
    itemBuildPCShowPopText: {
        fontWeight: 'bold',
        fontSize: 36,
        color: '#fff',
        lineHeight: 36,
    },
    itemBuildPCPop: {
        flex: 1,
        position: 'relative',
        paddingTop: 25,
        backgroundColor: '#243a76',
    },
    itemBuildPCPopClose: {
        width: 30,
        height: 30,
        borderWidth: 1,
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        borderColor: '#fff'
    },
    itemBuildPCPopCloseIcon: {
        color: '#fff'
    },
    boxPrductBuildPc: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxPrductBuildPcList: {},
    boxPrductBuildPcItem: {
        flexDirection: 'row',
        marginBottom: 15,
        alignItems: 'center',
        paddingBottom: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1'
    },
    boxPrductBuildPcImg: {
        width: 60,
        height: 60,
        position: 'relative',
        overflow: 'hidden',
        marginRight: 10,
    },
    boxPrductBuildPcImgCt: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    boxPrductBuildPcInfo: {
        width: winWidthP10 - 130,
        paddingRight: 10,
    },
    boxPrductBuildPcName: {
        marginBottom: 10,
    },
    boxPrductBuildPcOtherText: {
        marginBottom: 10,
        flexDirection: 'row',
    },
    boxPrductBuildPcOtherTextSt: {
        fontSize: 12,
        width: 80,
    },
    boxPrductBuildPcOtherTextNd: {
        fontSize: 12,
    },
    boxPrductBuildPcPrice: {
        fontSize: 19,
        fontWeight: 'bold',
        color: '#f40606',
        marginBottom: 7,
    },
    boxPrductBuildPcOldPrice: {
        color: '#888',
        textDecorationLine: 'line-through',
    },
    boxPrductBuildPcQuantity: {
        width: 80,
    },
    boxPrductBuildPcQuantityNo: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
        height: 20,
        backgroundColor: '#eaeaea',
        borderRadius: 3,
    },
    boxPrductBuildPcQuantityNoIcon: {
        marginRight: 5,
    },
    boxPrductBuildPcQuantityNoText: {},
    boxPrductBuildPcQuantityHas: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
        height: 20,
        backgroundColor: '#278c56',
        borderRadius: 3,
    },
    boxPrductBuildPcQuantityHasIcon: {
        marginRight: 5,
        color: '#fff',
    },
    boxPrductBuildPcQuantityHasText: {
        color: '#fff'
    },
    boxPrductBuildPcSelec: {

    },
    boxPrductBuildPcSelecNo: {
        width: 50,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
        backgroundColor: '#ec1b23',
    },
    boxPrductBuildPcSelecYes: {
        width: 50,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
        backgroundColor: '#243a76',
    },
    boxPrductBuildPcSelecIcon: {
        fontWeight: 'bold',
        fontSize: 36,
        color: '#fff',
        lineHeight: 36,
    },
    headerPopBuildPC: {
        width: winWidth,
        flexDirection: 'column',
        zIndex: 9,
    },
    headerPopBuildPCContentSt: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        backgroundColor: '#243a76',
        height: 40,
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    headerPopBuildPCTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#fff'
    },
    headerPopBuildPCContentNd: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: winWidth,
        backgroundColor: '#243a76',
        padding: 10,
        zIndex: 9,
    },
    headerPopBuildPCSearch: {
        width: winWidthP10 - 60,
        backgroundColor: '#fff',
        position: 'relative',
        borderRadius: 3,
        overflow: 'hidden',
    },
    headerPopBuildPCSearchInput: {
        width: '100%',
        height: 40,
        paddingHorizontal: 10,
        paddingRight: 40,
    },
    headerPopBuildPCSearchButton: {
        width: 40,
        height: 40,
        position: 'absolute',
        right: 0,
        top: 0,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    headerPopBuildPCSearchIcon: {
        fontSize: 18,
        color: '#ec1b23'
    },
    headerPopBuildPCContentFilter: {
        width: 60,
        height: 40,
        position: 'relative',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    headerPopBuildPCFilter: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        zIndex: 9,
    },
    headerPopBuildPCFinterIcon: {
        fontSize: 16,
        color: '#fff',
        marginRight: 5,
    },
    headerPopBuildPCFinterText: {
        fontSize: 16,
        color: '#fff'
    },
    headerPopBuildPCContentFilterShowHide: {
        width: winWidth,
        position: 'absolute',
        top: 50,
        right: -10,
        padding: 10,
        backgroundColor: '#fff',
        zIndex: 9,
        display: 'none',
    },
    headerPopBuildPCContentFilterShow: {
        width: winWidth,
        position: 'absolute',
        top: 50,
        right: -10,
        padding: 10,
        backgroundColor: '#fff',
        zIndex: 9,
    },
    headerPopBuildPCContentFilterTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#243a76',
        lineHeight: 32,
    },
    headerPopBuildPCContentFilterBox: {
        paddingVertical: 10,
        borderTopColor: '#e1e1e1',
        borderTopWidth: 1,
    },
    headerPopBuildPCContentFilterName: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    headerPopBuildPCContentFilterList: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        alignItems: 'center',
    },
    headerPopBuildPCContentFilterItem: {
        width: '100%',
        flexDirection: 'row',
        marginBottom: 10,
        alignItems: 'center'
    },
    headerPopBuildPCContentFilterCheck: {
        width: 35,
        height: 35,
        borderWidth: 1,
        borderColor: '#999',
        marginRight: 10,
        position: 'relative',
    },
    headerPopBuildPCContentFilterText: {},
    headerPopBuildPCContentRd: {
        flexDirection: 'column',
        width: winWidth,
        padding: 10,
        borderBottomColor: '#f7f7f7',
        borderBottomWidth: 1,
    },
    headerPopBuildPCContentRdTop: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10,
        position: 'relative',
        zIndex: 8,
    },
    headerPopBuildPCContentSelect: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '49%',
        position: 'relative',
        zIndex: 9,
    },
    headerPopBuildPCContentSelectTite: {
        marginRight: 10,
        fontWeight: 'bold',
        width: 65,
    },
    headerPopBuildPCContentSelectBox: {
        paddingHorizontal: 10,
        height: 32,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 3,
    },
    headerPopBuildPCContentSelectBoxText: {
        marginRight: 10,
    },
    headerPopBuildPCContentSelectBoxIcon: {},
    headerPopBuildPCContentSelectList: {
        position: 'absolute',
        width: winWidthP10,
        top: 35,
        padding: 10,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.22,
        shadowRadius: 2.22,
        elevation: 3,
        display: 'none',
    },
    active: {
        display: 'flex',
    },
    poRight: {
        right: 0,
    },
    poLeft: {
        left: 0,
    },
    headerPopBuildPCContentSelectItem: {
        marginBottom: 10,
    },
    pagingBuildPc: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
    },
    pagingBuildPcItem: {
        width: 28,
        height: 28,
        borderRadius: 3,
        backgroundColor: '#243a76',
        marginHorizontal: 2,
        color: '#fff',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#243a76',
        borderWidth: 1,
    },
    pagingBuildPcItemActive: {
        backgroundColor: '#fff',
    },
    pagingBuildPcText: {
        color: '#fff',
        fontWeight: 'bold',
    },
    pagingBuildPcTextActive: {
        color: '#ec0000',
        fontWeight: 'bold',
    },
    buttonBuildPcFt: {
        width: '100%',
        marginTop: 10,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2d3877',
        borderRadius: 3,
    },
    buttonBuildPcFtText: {
        fontSize: 14,
        textTransform: 'uppercase',
        color: '#fff',
        marginRight: 10,
        fontWeight: 'bold',
    },
    buttonBuildPcFtIcon: {
        fontSize: 14,
        color: '#fff',
    },
    sliderSwipper: {
        flexDirection: 'row',
        height: 500,
    },
    ProductOtherBuildPc: {
        marginVertical: 20,
        paddingHorizontal: 10,
        borderTopWidth: 1,
        borderTopColor: '#e1e1e1'
    },
    ProductOtherBuildPcTitle: {
        width: '100%',
        paddingVertical: 10,
        fontWeight: 'bold',
        fontSize: 24,
        textTransform: 'uppercase',
        color: '#2d3877',
        textAlign: 'center'
    },
    ProductOtherBuildPcList: {
        width: '100%',
    },
    ProductOtherBuildPcButton: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
        backgroundColor: '#2d3877'
    },
    ProductOtherBuildPcButtonText: {
        color: '#fff',
        marginRight: 10,
    },
    ProductOtherBuildPcButtonIcon: {
        color: '#fff'
    },
})