Hanoicomputer_App/screens/ProductDetail.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, Share } 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 { ShowProductItem, ItemComboSet, ItemComboSetProDetail } from '../components/product/productItem';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import YoutubePlayer from "react-native-youtube-iframe";
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';



export default function ProductDetail() {
    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>

                <SliderImgDetail />

                <ContentTopDetail />

                <Comboset />

                <ProductDetailDes />

                <ProductDetailSpec />

                <ProductDetailVideo />

                <ProductDetailSameCategory />

                <ProductDetailReview />

                <ProductDetailComment />

                <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 / 500; //541 is actual image width


const SliderImgDetail = () => {

    const imageSlider = [
        {
            uri: 'https://hanoicomputercdn.com/media/product/52019_14zd90n_v_ax55a5.png',
        },
        {
            uri: 'https://hanoicomputercdn.com/media/product/52019_laptop_lg_gram_14zd90n_v_ax55a5_i5_xam_04.jpg',
        },
        {
            uri: 'https://hanoicomputercdn.com/media/product/52019_laptop_lg_gram_14zd90n_v_ax55a5_i5_xam_05.jpg',
        },
    ]

    return (
        <View style={styles.sliderSwipperDetailBox}>
            <Swiper style={styles.sliderSwipperDetail} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
                {
                    imageSlider.map((item, index) => {
                        return (
                            <View key={index} style={styles.imgSliderDetailItem} >
                                <Image style={styles.imgSliderDetail} source={{ uri: item.uri }} />
                            </View>
                        );
                    })
                }
            </Swiper>
        </View>
    )
}

const ContentTopDetail = () => {
    return (
        <View style={styles.boxContentTopDetail}>
            <Text style={styles.ProductDetailTitle}>Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)</Text>
            <View style={styles.ProductDetailSkuRate}>
                <Text style={styles.ProductDetailSku}>
                    Mã sản phẩm <Text style={styles.ProductDetailSkuText}>TESTABCD</Text>
                </Text>
                <Text style={styles.ProductDetailRate}>
                    Đánh giá: <FontAwesome style={styles.ProductDetailRateImg} name="star" />
                </Text>
            </View>
            <View style={styles.ProductDetailBoxPrice}>
                <View>
                    <View style={[styles.ProductDetailPrice, styles.backGroundBoxPrice]}>
                        <Text style={[styles.ProductDetailBoxPriceText, styles.backGroundBoxPrice]}>26.000.000 đ</Text>
                        <Text style={[styles.ProductDetailBoxPriceVat, styles.backGroundBoxPrice]}>(Giá đã bao gồm VAT)</Text>
                    </View>
                    <View style={[styles.ProductDetailOldPrice, styles.backGroundBoxPrice]}>
                        <Text style={[styles.ProductDetailOldPriceTitle, styles.backGroundBoxPrice]}>Giá thị trường:</Text>
                        <Text style={[styles.ProductDetailOldPriceText, styles.backGroundBoxPrice]}>30.000.000 đ</Text>
                        <Text style={[styles.ProductDetailOldPriceDiscount, styles.backGroundBoxPrice]}>(Tiết kiệm: 4.000.000 đ)</Text>
                    </View>
                    <ProductDetailConfigGroup />
                </View>
            </View>
            <View style={styles.ProductDetailBoxWarehouse}>
                <Text style={styles.ProductDetailBoxWarehouseTitle}>Kho hàng:</Text>
                <View style={styles.ProductDetailBoxWarehouseList}>
                    <Text style={styles.ProductDetailBoxWarehouseItem}><FontAwesome style={styles.ProductDetailBoxWarehouseIcon} name="map-marker" /> 129+131 Lê Thanh Nghị - HBT - Hà Nội</Text>
                    <Text style={styles.ProductDetailBoxWarehouseItem}><FontAwesome style={styles.ProductDetailBoxWarehouseIcon} name="map-marker" /> 43 Thái Hà - Đống Đa - Hà Nội</Text>
                </View>
            </View>
            <Text style={[styles.ProductDetailMgb10, styles.ProductDetailText14]}>Bảo hành: 12 Tháng</Text>
            <Text style={[styles.ProductDetailMgb10, styles.ProductDetailText14]}>Lượt Xem: 12000</Text>
            <View style={styles.detailOfferFix}>
                <View style={styles.detailOfferFixItem}>
                    <LinearGradient colors={['#ffa500', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientHot}>
                        <Text style={styles.linearGradientHotText}>HOT</Text>
                    </LinearGradient>
                    <Text style={styles.detailOfferFixItemText}>Giảm thêm đến 200.000đ cho học sinh - sinh viên khi mua Laptop, PC nguyên chiếc(Không cộng gộp với khuyến mãi của PC lắp ráp)</Text>
                </View>
                <View style={styles.detailOfferFixItem}>
                    <LinearGradient colors={['#ffa500', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientHot}>
                        <Text style={styles.linearGradientHotText}>HOT</Text>
                    </LinearGradient>
                    <Text style={styles.detailOfferFixItemText}>Chính sách Bảo Hành Vàng dành cho doanh nghiệp</Text>
                </View>
            </View>
            <View style={styles.detailOffer}>
                <LinearGradient colors={['#243a76', '#ed1b24']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.linearGradientOffer}>
                    <Text style={styles.detailOfferTitle}>Chương trình khuyến mại</Text>
                </LinearGradient>
                <View style={styles.detailOfferList}>
                    <Text style={styles.detailOfferItem}>BỘ QUÀ TẶNG TRỊ GIÁ 1.600.000Đ</Text>
                    <Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
                    <Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
                    <Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
                    <Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
                    <Text style={styles.detailOfferItem}> + Chuột không dây Logitech M185 trị giá 249.000đ (MELO055)</Text>
                </View>
            </View>
        </View>
    )
}

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

const ProductDetailConfigGroup = () => {

    const dataConfigGroup = [
        {
            url: '/a',
            name: 'LG 14ZD90N-V.AX53A5 (RAM/256GB/Trắng)',
            price: 25000000,
            isCurrent: 1,
        },
        {
            url: '/a',
            name: 'LG 14ZD90N-V.AX53A5 (RAM/512GB/Trắng)',
            price: 30000000,
            isCurrent: 0,
        },
        {
            url: '/a',
            name: 'LG 14ZD90N-V.AX53A5 (RAM/256GB/Đen)',
            price: 27000000,
            isCurrent: 0,
        },
    ]

    return (
        <View style={[styles.ProductDetailConfig, styles.backGroundBoxPrice]}>
            <Text style={[styles.ProductDetailConfigTitle, styles.backGroundBoxPrice]}>Tùy chọn sản phẩm</Text>
            <View>
                {
                    dataConfigGroup.map((item, index) => <ConfigGroupItem key={index} url={item.url} name={item.name} price={item.price} isCurrent={item.isCurrent} />)
                }
            </View>
        </View>
    )
}

const ConfigGroupItem = (props: { url: string, name: string, price: number, isCurrent: number }) => {
    const { url, name, price, isCurrent } = props;
    return (
        <View style={styles.ProductDetailConfigItem}>
            <View style={styles.ProductDetailConfigItemName}>
                {
                    isCurrent == 1 ? <FontAwesome style={styles.ProductDetailConfigItemIconCurent} name="check-circle" /> : <FontAwesome style={styles.ProductDetailConfigItemIcon} name="circle-thin" />
                }
                <Text style={styles.ProductDetailConfigItemNamePro}>{name}</Text>
            </View>
            <Text style={styles.ProductDetailConfigItemPrice}>{formatCurrency(price)} đ</Text>
        </View>
    )
}

const ProductDetailDes = () => {
    return (
        <View style={styles.productDetailDes}>
            <Text style={styles.productDetailDesTitle}>Giới thiệu sản phẩm</Text>
            <View style={styles.productDetailDesContent}>
                <Text>
                    Nội dung đang được cập nhật!
                </Text>
            </View>
        </View>
    )
}

const ProductDetailSpec = () => {
    return (
        <View style={styles.productDetailSpec}>
            <Text style={styles.productDetailSpecTitle}>Thông số kỹ thuật</Text>
            <View style={styles.productDetailSpecContent}>
                <Text>
                    <TableDetailSpec />
                </Text>
            </View>
        </View>
    )
}

const TableDetailSpec = () => {
    const tableData = {
        tableHead: ['', 'Head1', 'Head2', 'Head3'],
        tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
        tableData: [
            ['1', '2', '3'],
            ['a', 'b', 'd'],
            ['1', '2', '3'],
            ['a', 'b', 'c']
        ]
    }

    return (
        <Table style={styles.tableSpec}>
            <Row style={styles.tableTitle} data={tableData.tableHead} flexArr={[1, 2, 1, 1]} />
            <TableWrapper style={styles.tableWrapper}>
                <Col style={styles.col} data={tableData.tableTitle} heightArr={[28, 28, 28, 28]} />
                <Rows style={styles.row} data={tableData.tableData} flexArr={[2, 1, 1]} />
            </TableWrapper>
        </Table>
    )
}

const Comboset = () => {

    const dataProDetail = {
        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,
    }
    const dataCombo = [
        {
            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: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            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: 30000000,
            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: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
    ]
    return (
        <View style={styles.boxproductCombo}>
            <Text style={styles.productDetailSpecTitle}>Ưu đãi khi mua phụ kiện cùng Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)</Text>
            <View>
                <View>
                    <ItemComboSetProDetail key={dataProDetail.id} id={dataProDetail.id} productName={dataProDetail.productName}
                        productSKU={dataProDetail.productSKU} productImage={dataProDetail.productImage} price={dataProDetail.price} marketPrice={dataProDetail.marketPrice} quantity={dataProDetail.quantity} />
                </View>
                <View>
                    {
                        dataCombo.map(item => <ItemComboSet key={item.id} id={item.id} productName={item.productName}
                            productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity}
                        />)
                    }
                </View>
                <View style={styles.boxproductComboTotalPrice}>
                    <Text>Tổng tiền:</Text>
                    <Text style={styles.boxproductComboPrice}>79.000.000 đ</Text>
                    <Text style={styles.boxproductComboPriceOld}>89.000.000 đ</Text>
                    <Pressable style={styles.boxproductComboButtonBuy}>
                        <Text style={styles.boxproductComboBuyCount}>Mua thêm 0 sản phẩm</Text>
                    </Pressable>
                </View>
            </View>
        </View>
    )
}

const ProductDetailVideo = () => {
    const [playing, setPlaying] = useState(false);
    const heightVideo = winWidth / 2 + 15;
    return (
        <View style={styles.productDetailVideo}>
            <Text style={styles.productDetailSpecTitle}>Video Sản phẩm</Text>
            <View>
                <YoutubePlayer
                    height={heightVideo}
                    play={playing}
                    videoId={"efxqop7QHr8"}
                />
            </View>
        </View>
    )
}

const ProductDetailSameCategory = () => {
    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.bloxProductHome}>
            <Text style={styles.titleProductHome}>Lap top, máy tính xách tay</Text>
            <View style={styles.listProductHomeBao}>
                <ScrollView horizontal={true} style={styles.listProductHome}>
                    {
                        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}
                        />)
                    }
                </ScrollView>
            </View>
        </View>
    )
}

const ProductDetailReview = () => {

    const dataReview = {
        summary: {
            total: 10,
            avgRate: 4,
        },
        list: [
            {
                custommerName: 'Hurasoft Test',
                date: 15 / 3 / 2021,
                content: 'Test bình luận thôi nhé',
                raply: [
                    {
                        custommerName: 'Admin',
                        date: 15 / 3 / 2021,
                        content: 'Test trả lời thôi nhé',
                    }
                ]
            },
            {
                custommerName: 'Hurasoft Test',
                date: 15 / 3 / 2021,
                content: 'Test bình luận thôi nhé',
                raply: [
                    {
                        custommerName: 'Admin',
                        date: 15 / 3 / 2021,
                        content: 'Test trả lời thôi nhé',
                    }
                ]
            },
        ]
    }

    const abc = [1, 2, 3, 4, 5]
    const bcd = {
        1: 1,
        2: 3,
    }

    return (
        <View style={styles.boxProductReview}>
            <Text style={styles.titleProductHome}>Bình luận về sản phẩm</Text>
            <View style={styles.reviewRate}>
                <View style={styles.reviewRateTotal}>
                    <Text style={styles.reviewRateTotalNum}>{dataReview.summary.avgRate}/5</Text>
                    <FontAwesome style={styles.reviewRateTotalIcon} name="star" />
                </View>
                <View style={styles.reviewRateList}>
                    <ListCounterRatingReviewItem />

                </View>
            </View>
            <Text>Chia sẻ nhận xét về sản phẩm</Text>
            <Pressable style={styles.reviewButtonShowForm} onPress={() => Alert.alert('show form review')}><Text style={styles.reviewButtonShowFormText}>Gửi đánh giá của bạn</Text></Pressable>
            <View style={styles.reviewForm}>
                <View style={styles.reviewFormContent}>
                    <FormInputReview />
                </View>
            </View>
        </View>
    )
}

type listItem = {
    rate: number,
    total: number,
}

const ListCounterRatingReviewItem = () => {
    const listRate = [
        {
            rate: 5,
            total: 3
        },
        {
            rate: 4,
            total: 3
        },
        {
            rate: 3,
            total: 2
        },
        {
            rate: 2,
            total: 2
        },
        {
            rate: 1,
            total: 0
        },
    ]
    return (
        <View>
            {
                listRate.map((item, index) =>
                    <View key={index} style={styles.reviewRateListItem}>
                        <View style={styles.reviewRateListItemNum}>
                            <Text style={styles.reviewRateListText}>{item.rate}</Text>
                            <FontAwesome style={styles.reviewRateListIcon} name="star" />
                        </View>
                        <View style={styles.reviewRateListItemCount}>
                            <Text style={styles.reviewRateListCount}>{item.total}</Text>
                            <Text style={styles.reviewRateListCountText}>đánh giá</Text>
                        </View>
                    </View>
                )
            }
        </View>

    )
}

const Rating = () => {
    const listRate = [1, 2, 3, 4, 5];
    const listStatusRate = ['Không thích', 'Tạm được', 'Bình thường', 'Hài lòng', 'Rất hài lòng'];
    const [defaultRating, setDefaultRating] = useState(5);
    const [statusRating, setStatusRating] = useState(5);
    return (
        <View style={styles.ratingStyle}>
            <Text style={styles.reviewFormTitle}>Chọn đánh giá của bạn</Text>
            {
                listRate.map((item, index) => {
                    return (
                        <TouchableOpacity style={styles.ratingStyleStar} onPress={() => {
                            setDefaultRating(item)
                            setStatusRating(item)
                        }} key={index}>
                            {
                                item <= defaultRating
                                    ? <FontAwesome style={styles.ratingStyleIconActive} name="star" />
                                    : <FontAwesome style={styles.ratingStyleIcon} name="star" />
                            }
                        </TouchableOpacity>
                    )
                }
                )
            }
            {
                listStatusRate.map((item, index) => {
                    const key = index + 1;
                    if (statusRating == key) {
                        return (
                            <Text style={styles.ratingStyleText} key={index}>{item}</Text>
                        )
                    }
                })
            }
        </View>
    )
}

const FormInputReview = () => {
    return (

        <View style={[styles.boxFormReview]}>
            <Rating />
            <View style={styles.boxFormReviewContentText}>
                <TextInput style={styles.boxFormReviewContent} multiline={true} numberOfLines={4} placeholder="Nhập đánh giá về sản phẩm (tối thiểu 80 ký tự)" />
                <Pressable style={styles.boxFormReviewFile} onPress={() => Alert.alert('Chức năng up ảnh')}>
                    <Ionicons style={styles.boxFormReviewFileIcon} name="camera-outline" />
                    <Text style={styles.boxFormReviewFileText}>Đính kèm ảnh</Text>
                </Pressable>
            </View>
            <TextInput style={styles.boxFormReviewInput} placeholder="Họ tên" />
            <TextInput style={styles.boxFormReviewInput} placeholder="Số điện thoại" />
            <TextInput style={styles.boxFormReviewInput} placeholder="Email" />
            <Pressable style={styles.boxFormReviewSubmit}>
                <Text style={styles.boxFormReviewSubmitText}>Gửi đánh giá</Text>
            </Pressable>
        </View>
    )
}

const ProductDetailComment = () => {
    const [modalVisible, setModalVisible] = useState(false);
    return (
        <View style={[styles.boxFormComment]}>
            <View style={styles.boxFormReviewContentText}>
                <TextInput style={styles.boxFormReviewContent} multiline={true} numberOfLines={4} placeholder="Mời bạn để lại bình luận" />
                <Pressable style={styles.boxFormReviewFile} onPress={() => Alert.alert('Chức năng up ảnh')}>
                    <Ionicons style={styles.boxFormReviewFileIcon} name="camera-outline" />
                    <Text style={styles.boxFormReviewFileText}>Đính kèm ảnh</Text>
                    <Text style={styles.boxFormComentFileText}>Quy định đăng bình luận</Text>
                </Pressable>
                <View style={styles.boxFormComentShowForm}>
                    <Pressable style={styles.boxFormComentShowFormButton} onPress={() => setModalVisible(true)}>
                        <Text style={styles.boxFormComentShowFormButtonText}>Gửi bình luận</Text>
                    </Pressable>
                </View>
            </View>
            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
                <Pressable onPress={() => setModalVisible(!modalVisible)} style={styles.popupCmt}>
                    <View style={styles.popupCmtContent}>
                        <Pressable onPress={() => setModalVisible(!modalVisible)}>
                            <FontAwesome style={styles.popupCmtClose} name="times" />
                        </Pressable>
                        <TextInput style={styles.boxFormReviewInput} placeholder="Họ tên" />
                        <TextInput style={styles.boxFormReviewInput} placeholder="Số điện thoại" />
                        <TextInput style={styles.boxFormReviewInput} placeholder="Email" />
                        <Pressable style={styles.boxFormReviewSubmit}>
                            <Text style={styles.boxFormReviewSubmitText}>Gửi đánh giá</Text>
                        </Pressable>
                    </View>
                </Pressable>
            </Modal>
        </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
    },
    sliderSwipperDetailBox: {
        width: winWidth,
        height: 500 * ratio,
        paddingHorizontal: 10,
    },
    sliderSwipperDetail: {
        marginBottom: 20,
    },
    imgSliderDetailItem: {
        height: winWidth - 20,
        width: winWidth - 20,
        position: 'relative',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    imgSliderDetail: {
        height: winWidth - 20,
        width: winWidth - 20,
        maxHeight: winWidth - 20,
        maxWidth: winWidth - 20,
    },
    boxContentTopDetail: {
        paddingHorizontal: 10,
    },
    ProductDetailTitle: {
        marginVertical: 5,
        fontSize: 18,
        fontWeight: 'bold',
    },
    ProductDetailSkuRate: {
        marginVertical: 14,
        display: 'flex',
        flexDirection: 'row'
    },
    ProductDetailSku: {
        fontSize: 14,
        marginRight: 20,
    },
    ProductDetailSkuText: {
        color: '#f00'
    },
    ProductDetailRate: {
        fontSize: 14,
    },
    ProductDetailRateImg: {},
    ProductDetailBoxPrice: {
        backgroundColor: '#fcf8e4',
        padding: 10,
        borderRadius: 5,
        width: '100%',
        marginBottom: 10,
    },
    backGroundBoxPrice: {
        backgroundColor: '#fcf8e4',
    },
    ProductDetailPrice: {
        flexDirection: 'row',
        alignItems: 'baseline',
        paddingBottom: 5,
    },
    ProductDetailBoxPriceText: {
        marginRight: 20,
        fontSize: 18,
        fontWeight: 'bold',
        color: '#f10000'
    },
    ProductDetailBoxPriceVat: {},
    ProductDetailOldPrice: {
        flexDirection: 'row',
        display: 'flex',
        flexWrap: 'wrap',
        paddingBottom: 10,
    },
    ProductDetailOldPriceTitle: {},
    ProductDetailOldPriceText: {
        fontWeight: 'bold',
        fontSize: 14,
        textDecorationLine: 'line-through',
    },
    ProductDetailOldPriceDiscount: {},
    ProductDetailConfig: {},
    ProductDetailConfigTitle: {
        paddingBottom: 5,
        fontSize: 14,
        fontWeight: 'bold',
    },
    ProductDetailConfigItem: {
        paddingBottom: 10,
        backgroundColor: '#fcf8e4',
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
    },
    ProductDetailConfigItemName: {
        paddingHorizontal: 10,
        paddingVertical: 10,
        paddingBottom: 5,
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#fff',
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
        alignItems: 'center',
    },
    ProductDetailConfigItemIcon: {
        fontSize: 16,
        marginRight: 10,
        color: '#666'
    },
    ProductDetailConfigItemIconCurent: {
        color: '#26b214',
        fontSize: 16,
        marginRight: 10,
    },
    ProductDetailConfigItemNamePro: {
        fontSize: 14,
    },
    ProductDetailConfigItemPrice: {
        paddingHorizontal: 10,
        paddingVertical: 10,
        paddingTop: 5,
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#fff',
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3,
        alignItems: 'center',
        fontSize: 15,
        color: '#d82a29',
        fontWeight: 'bold'
    },
    ProductDetailBoxWarehouse: {
        marginBottom: 10,
        display: 'flex',
        flexDirection: 'column',
    },
    ProductDetailBoxWarehouseTitle: {
        fontSize: 14,
        marginBottom: 5,
    },
    ProductDetailBoxWarehouseList: {
        display: 'flex',
        flexDirection: 'column',
    },
    ProductDetailBoxWarehouseItem: {
        fontSize: 14,
        marginBottom: 5,
        color: '#f00',
        display: 'flex',
        flexDirection: 'row',
    },
    ProductDetailBoxWarehouseIcon: {
        color: '#26b214',
        marginRight: 5,
    },
    ProductDetailMgb10: {
        marginBottom: 10,
    },
    ProductDetailText14: {
        fontSize: 14,
    },
    detailOfferFix: {
        display: 'flex',
        flexDirection: 'column',
        marginBottom: 10,
    },
    detailOfferFixItem: {
        marginBottom: 10,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        width: '100%'
    },
    linearGradientHot: {
        width: 42,
        height: 24,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 12,
        marginRight: 10,
    },
    linearGradientHotText: {
        color: '#fff'
    },
    detailOfferFixItemText: {
        width: winWidth - 72,
    },
    detailOffer: {
        marginBottom: 20,
        display: 'flex',
        flexDirection: 'column'
    },
    linearGradientOffer: {
        padding: 10,
        borderRadius: 3,
        marginBottom: 10,
    },
    detailOfferTitle: {
        textTransform: 'uppercase',
        color: '#fff',
        fontSize: 14,
    },
    detailOfferList: {
        padding: 10,
        backgroundColor: '#f1f1f1',
        borderRadius: 3,
    },
    detailOfferItem: {
        marginBottom: 10,
    },
    productDetailDes: {
        marginBottom: 20,
        paddingHorizontal: 10,
    },
    productDetailDesTitle: {
        padding: 10,
        backgroundColor: '#243a76',
        borderRadius: 3,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
        textTransform: 'uppercase',
        overflow: 'hidden',
        marginBottom: 10,
    },
    productDetailDesContent: {},
    productDetailSpec: {
        marginBottom: 20,
        paddingHorizontal: 10,
    },
    productDetailSpecTitle: {
        padding: 10,
        backgroundColor: '#243a76',
        borderRadius: 3,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
        textTransform: 'uppercase',
        overflow: 'hidden',
        marginBottom: 10,
    },
    productDetailSpecContent: {
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    tableTitle: {
        height: 40,
    },
    tableSpec: {
        width: winWidth - 20,
    },
    row: {
        height: 28,
    },
    col: {
        height: 28,
    },
    tableWrapper: {
        flexDirection: 'row',
        display: 'flex',
        justifyContent: 'center'
    },
    boxproductCombo: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxproductComboTotalPrice: {
        display: 'flex',
        flexDirection: 'column',
    },
    boxproductComboPrice: {
        marginTop: 5,
        fontSize: 18,
        fontWeight: 'bold',
        color: '#e00'
    },
    boxproductComboPriceOld: {
        marginVertical: 5,
        fontSize: 18,
        fontWeight: 'bold',
        color: '#999',
        textDecorationLine: 'line-through'
    },
    boxproductComboButtonBuy: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        height: 42,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e00',
        marginTop: 5,
    },
    boxproductComboBuyCount: {
        textTransform: 'uppercase',
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
        borderRadius: 3,
    },
    productDetailVideo: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    videoDetail: {
        width: winWidth - 20,
        height: 300,
    },
    bloxProductHome: {
        width: winWidth,
        marginBottom: 20,
        padding: 10,
    },
    titleProductHome: {
        backgroundColor: '#243a76',
        fontSize: 15,
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 3,
        lineHeight: 40,
        marginBottom: 5,
        textTransform: 'uppercase',
        fontWeight: '700',
        color: '#fff',
        overflow: 'hidden',
    },
    listProductHomeBao: {
        overflow: 'hidden',
    },
    listProductHome: {
        marginRight: -5,
        marginLeft: -5,
    },
    boxProductReview: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    reviewRate: {
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 5,
        padding: 10,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    reviewRateTotal: {
        width: (winWidth - 20) / 2,
        flexDirection: 'row',
        alignItems: 'center',
    },
    reviewRateTotalNum: {
        marginRight: 5,
        fontSize: 16,
    },
    reviewRateTotalIcon: {
        fontSize: 16,
    },
    reviewRateList: {
    },
    reviewRateListItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    reviewRateListItemNum: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 10,
    },
    reviewRateListItemCount: {
        flexDirection: 'row',
    },
    reviewRateListText: {

    },
    reviewRateListIcon: {},
    reviewRateListCount: {
        color: '#288ad6',
        fontWeight: 'bold',
    },
    reviewRateListCountText: {
        color: '#288ad6',
    },
    reviewButtonShowForm: {
        width: '100%',
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#288ad6',
        flexDirection: 'row',
        justifyContent: 'center',
        height: 46,
        alignItems: 'center',
        marginVertical: 10,
    },
    reviewButtonShowFormText: {
        color: '#288ad6',
    },
    reviewForm: {},
    reviewFormContent: {},
    reviewFormTitle: {
        marginRight: 10,
    },
    ratingStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
    },
    ratingStyleStar: {
        marginHorizontal: 1,
    },
    ratingStyleIcon: {
        fontSize: 16,
        color: '#dadada'
    },
    ratingStyleIconActive: {
        fontSize: 16,
        color: '#ffa53f'
    },
    ratingStyleText: {
        marginLeft: 8,
        lineHeight: 18,
        paddingHorizontal: 5,
        color: '#fff',
        backgroundColor: '#52b858'
    },
    boxFormReview: {
    },
    boxFormReviewContentText: {
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
        overflow: 'hidden',
        marginBottom: 10,
    },
    boxFormReviewContent: {
        height: 100,
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1'
    },
    boxFormReviewFile: {
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#f7f7f7'
    },
    boxFormReviewFileIcon: {
        marginRight: 10,
        fontSize: 16,
    },
    boxFormReviewFileText: {
    },
    boxFormReviewInput: {
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
        overflow: 'hidden',
        marginBottom: 10,
        padding: 10,
    },
    boxFormReviewSubmit: {
        width: '100%',
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#288ad6',
        flexDirection: 'row',
        justifyContent: 'center',
        height: 46,
        alignItems: 'center',
        marginVertical: 10,
    },
    boxFormReviewSubmitText: {
        color: '#288ad6',
    },
    boxFormComment: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxFormComentShowForm: {
        padding: 10,
        backgroundColor: '#f7f7f7',
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    boxFormComentShowFormButton: {
        padding: 10,
        width: 150,
        backgroundColor: '#288ad6',
        borderRadius: 5,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    boxFormComentShowFormButtonText: {
        textTransform: 'uppercase',
        color: '#fff',
    },
    popupCmt: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
        position: 'relative',
        zIndex: 1,
    },
    popupCmtContent: {
        width: winWidth - 30,
        maxWidth: 300,
        maxHeight: 450,
        backgroundColor: '#fff',
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 2.22,
        shadowRadius: 2.22,
        elevation: 3,
        borderRadius: 5,
        position: 'relative',
        zIndex: 2,
        padding: 10,
        paddingTop: 20,
    },
    popupCmtClose: {
        width: 30,
        height: 30,
        borderRadius: 15,
        position: 'absolute',
        right: -20,
        top: -30,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 2.22,
        shadowRadius: 2.22,
        backgroundColor: '#fff',
        zIndex: 11,
        overflow: 'hidden',
        textAlign: 'center',
        lineHeight: 30,
        fontSize: 16,
    },
    boxFormComentFileText: {},

})