Hanoicomputer_App/components/product/productItem.tsx

import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Pressable } from 'react-native';
import { Text, View, } from '../Themed';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import ProductDetail from '../../screens/ProductDetail';
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
import { NativeRouter, Route, Link } from "react-router-native";
import { TextInput } from 'react-native-gesture-handler';
import { Checkbox } from 'react-native-paper';

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

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 ShowProductItem = (props: { id: number, productName: string, productSKU: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {

    const { id, productName, productSKU, productImage, price, marketPrice, quantity, privateStyle } = props;
    const discount = Math.ceil(100 - (price / marketPrice * 100));


    return (
        <View style={[styles.itemProduct, privateStyle]}>
            <View style={styles.pBloxImgProduct}>
                <Text style={styles.pSkuProduct}>{productSKU}</Text>
                <Text style={styles.pDiscountProduct}>-{discount}%</Text>
                <View style={styles.pBloxImgProductBao}>
                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
                </View>
            </View>
            <Text style={styles.pNameProduct} numberOfLines={2}>
                {productName}
            </Text>
            <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
            <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
            <View style={styles.pBottonProduct}>
                <Text style={styles.pStatusProduct}>
                    {quantity > 0 ? <Ionicons style={styles.pStatusProductIcon} name="checkmark-outline" size={13} /> : <Ionicons style={styles.pStatusProductIcon} name="close-outline" size={13} />}
                    {quantity > 0 ? 'Còn hàng' : 'Hết hàng'}
                </Text>
                <Text style={styles.pCartProduct}><Ionicons style={styles.pCartProductIcon} name="cart-outline" size={13} />Giỏ hàng</Text>
            </View>
        </View>
    );
}

const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => {

    const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props;
    const discount = Math.ceil(100 - (price / marketPrice * 100));


    return (
        <View style={[styles.itemProduct, privateStyle]}>
            <TouchableOpacity style={styles.pProductDelete}>
                <FontAwesome style={styles.pProductDeleteIcon} name="times" />
            </TouchableOpacity>
            <View style={styles.pBloxImgProduct}>
                <Text style={styles.pSkuProduct}>{productSKU}</Text>
                <Text style={styles.pDiscountProduct}>-{discount}%</Text>
                <View style={styles.pBloxImgProductBao}>
                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
                </View>
            </View>
            <Text style={styles.pNameProduct} numberOfLines={2}>
                {productName}
            </Text>
            <Text style={styles.pSummaryProduct}>{summary}</Text>
            <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
            <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
        </View>
    );
}

const ItemComboSet = (props: { id: number, productName: string, productSKU: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => {

    const { id, productName, productSKU, productImage, price, marketPrice, quantity } = props;
    const discountCombo = Math.ceil(100 - (price / marketPrice * 100));
    const [checked, setChecked] = React.useState(false);
    return (
        <View style={[styles.itemProductCombo]}>
            <View style={styles.pBloxImgProduct}>
                <View style={styles.pBloxImgProductBao}>
                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
                </View>
            </View>
            <View style={styles.pNameProductAll}>
                <Checkbox.IOS status={checked ? 'checked' : 'unchecked'} onPress={() =>  setChecked(!checked)} style={styles.inputComboCheck} />
                <Text style={[styles.pNameProduct, styles.pNameProductCombo]} numberOfLines={2}>
                    {productName}
                </Text>
            </View>
            <View style={styles.priceProductAll}>
                <Text style={[styles.priceProduct, styles.priceProductCombo]}>{formatCurrency(price)} đ</Text>
                <Text style={[styles.oldPriceProduct, styles.oldPriceProductCombo]}>{formatCurrency(marketPrice)} đ</Text>
                <Text style={styles.pDiscountProductCombo}>-{discountCombo}%</Text>
            </View>
            <TouchableOpacity onPress={() => Alert.alert('popup product')} >
                <Text>Chọn tai nghe khác</Text>
            </TouchableOpacity>
        </View>
    );
}

const ItemComboSetProDetail = (props: { id: number, productName: string, productSKU: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => {

    const { id, productName, productSKU, productImage, price, marketPrice, quantity } = props;
    const discountCombo = Math.ceil(100 - (price / marketPrice * 100));
    return (
        <View style={[styles.itemProductCombo]}>
            <View style={styles.pBloxImgProduct}>
                <View style={styles.pBloxImgProductBao}>
                    <Image style={styles.pImgProduct} source={{ uri: productImage.large }} />
                </View>
            </View>
            <Text style={styles.pNameProduct} numberOfLines={2}>
                {productName}
            </Text>
            <Text style={styles.priceProduct}>{formatCurrency(price)} đ</Text>
            <Text style={styles.oldPriceProduct}>{formatCurrency(marketPrice)} đ</Text>
            <Text style={styles.pDiscountProductCombo}>-{discountCombo}%</Text>
        </View>
    );
}

export { ShowProductItem, ItemComboSet, ItemComboSetProDetail, ShowProductItemSave };

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

const styles = StyleSheet.create({
    itemProduct: {
        padding: 10,
    },
    pBloxImgProduct: {
        position: 'relative',
        marginBottom: 10,
    },
    pSkuProduct: {
        position: 'absolute',
        fontSize: 12,
        color: '#e00',
        top: 0,
        left: 0,
        lineHeight: 36,
        zIndex: 10,
    },
    pDiscountProduct: {
        width: 36,
        height: 36,
        backgroundColor: '#e00',
        position: 'absolute',
        top: 0,
        right: 0,
        color: '#fff',
        textAlign: 'center',
        lineHeight: 36,
        borderRadius: 18,
        overflow: 'hidden',
        fontSize: 12,
        zIndex: 10,
    },
    pBloxImgProductBao: {
        position: 'relative',
        paddingTop: '100%',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    pImgProduct: {
        position: 'absolute',
        top: 0,
        left: '5%',
        right: 0,
        bottom: 0,
        maxHeight: 500,
        width: '90%',
    },
    pNameProduct: {
        height: 40,
        lineHeight: 20,
        overflow: 'hidden',
        fontSize: 14,
        color: '#111',
        marginBottom: 5,
    },
    priceProduct: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#f10000',
        marginBottom: 5,
    },
    oldPriceProduct: {
        fontSize: 14,
        color: '#b7b7b7',
        marginBottom: 5,
        height: 24,
        lineHeight: 24,
        overflow: 'hidden',
        textDecorationLine: 'line-through',
    },
    pBottonProduct: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: 5,
    },
    pStatusProduct: {
        fontSize: 13,
        color: '#00a706',
    },
    pCartProduct: {
        fontSize: 13,
        color: '#333',
    },
    pStatusProductIcon: {
        fontSize: 15,
    },
    pCartProductIcon: {
        fontSize: 15
    },
    itemProductCombo: {
        width: '100%',
        marginBottom: 10,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        padding: 10,
    },
    inputComboCheck: {
        width: 20,
        height: 20,
        borderColor: '#222',
        borderWidth: 1,
        borderRadius: 3,
        alignSelf: 'center',
        backgroundColor: '#e0c',
    },
    pDiscountProductCombo: {
        textDecorationLine: 'line-through'
    },
    priceProductAll: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'baseline'
    },
    pNameProductCombo: {
        paddingLeft: 10,
        width: winWidth - 70,
    },
    pNameProductAll: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
    },
    priceProductCombo: {
        lineHeight: 22,
    },
    oldPriceProductCombo: {
        lineHeight: 22,
        marginHorizontal: 10
    },
    pProductDelete: {},
    pProductDeleteIcon: {
        fontSize: 18,
    },
    pSummaryProduct: {
        marginBottom: 10,
        lineHeight: 20,
    },
})