water-sys/app/screens/ProductDetailScreen.tsx

import React, { useEffect } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  useWindowDimensions,
  Animated,
  BackHandler,
} from "react-native";
import fontSize from "../utils/fontsizeUtils";
import widthUtils from "../utils/widthUtils";
import DiagonalArrowIcon from "../components/DiagonalArrowIcon";
import Carousel from "react-native-reanimated-carousel";
import WhiteCircleIcon from "../components/WhiteCircleIconIcon";
import ShoppingCartIcon from "../components/ShoppingCartIcon";
import { useState } from "react";
import {
  productApi,
  ProductDetailParams,
  Similars,
  SkuAttribute,
  ProductGroupList
} from "../services/api/productApi";
import { useNavigation, useRoute } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RouteProp } from "@react-navigation/native";
import BackIcon from "../components/BackIcon";
import CameraIcon from "../components/CameraIcon";
import ProductCard from "./ProductCard";
import CloseIcon from "../components/CloseIcon";
type ProductDetailRouteParams = {
  offer_id: string;
  searchKeyword?: string;
  price: number;
};



export const ProductDetailScreen = () => {
  const { width } = useWindowDimensions(); // 移动到组件内部
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const route =
    useRoute<RouteProp<Record<string, ProductDetailRouteParams>, string>>();
  const [activeIndex, setActiveIndex] = useState(0);
  const screenWidth = Dimensions.get("window").width;
  const [expandedGroups, setExpandedGroups] = useState<{
    [key: string]: boolean;
  }>({});

  const [product, setProduct] = useState<ProductDetailParams>();
  const [groupList, setGroupList] = useState<ProductGroupList[]>([]);

  const [similars, setSimilars] = useState<Similars>();
  const [isSimilarsFlag, setIsSimilarsFlag] = useState(false);
  const [imageUrls, setImageUrls] = useState<any[]>([]);
  const [imageHeights, setImageHeights] = useState<{ [key: string]: number }>({});
  const [priceSelectedSku, setPriceSelectedSku] = useState<any>();
  const [showBottomSheet, setShowBottomSheet] = useState(false);

  const groupData = (res: ProductDetailParams,priceSelectedSku:SkuAttribute[]) => {
    let result = {} as any;
    // 遍历数据
    res.skus.forEach((item) => {
      item.attributes.forEach((attribute) => {
        const { attribute_name, value } = attribute;
        // 如果结果对象中没有对应的属性名，则创建一个空数组
        if (!result[attribute_name]) {
          result[attribute_name] = [];
        }
  
        // 如果当前属性的值（value）已经存在于该组内，跳过
        if (
          !result[attribute_name].some(
            (existingAttribute: any) => existingAttribute.value === value
          )
        ) {
          result[attribute_name].push(attribute);
        }
      });
    });
  
    const list: ProductGroupList[] = [];
  
    // Iterate over each attribute and transform the data
    for (const [attributeName, attributes] of Object.entries(result)) {
      const withImage: any[] = [];
      const withoutImage: any[] = [];
  
      // @ts-ignore
      attributes.forEach((attribute) => {
        attribute.has_color = false;
        // Check if sku_image_url is not null or undefined
        const hasImage =
          attribute.sku_image_url !== null &&
          attribute.sku_image_url !== undefined;
  
        // Push the attribute to the appropriate array
        if (hasImage) {
          withImage.push(attribute);
        } else {
          withoutImage.push(attribute);
        }
      });
  
      // Add has_image to the list item
      list.push({
        attribute_name: attributeName,
        has_image: withImage.length > 0, // If there are any items with images, set has_image to true
        attributes: [...withImage, ...withoutImage],
      });
    }

    if(!priceSelectedSku){
      list.forEach(item => {
        item.attributes[0].has_color = true;
      })
      return list;
    }
    
    if(priceSelectedSku.length >= 1){
      priceSelectedSku.forEach(item => {
        list.forEach(item1 => {          
          item1.attributes.forEach(attribute => {
            if(attribute.value === item.value){              
              attribute.has_color = true;
            }
          })
        })
      })
      return list;
    }
    return list;
  };
  
  // 处理展开/收起
  const toggleExpand = (attributeName: string) => {
    setExpandedGroups((prev) => ({
      ...prev,
      [attributeName]: !prev[attributeName],
    }));
  };

  // 获取要显示的属性
  const getDisplayAttributes = (attributes: any[], attributeName: string) => {
    if (expandedGroups[attributeName]) {
      return attributes;
    }
    return attributes.slice(0, 6);
  };

  // 处理尺码选择
  const handleSizeSelect = (size: string, index: number) => {
    const newGroupList = [...groupList];
    const attributeIndex = newGroupList[index]?.attributes.findIndex(
      (item) => item.value === size
    );
    if (attributeIndex !== -1) {
      newGroupList[index].attributes = newGroupList[index].attributes.map(
        (item, i) => {
          if (i === attributeIndex) {
            return { ...item, has_color: true };
          }
          return { ...item, has_color: false };
        }
      );
      setGroupList(newGroupList);
    }
    const selectedSku:SkuAttribute[] = []
    groupList.forEach(item => {
      item.attributes.forEach(attribute => {
        if(attribute.has_color){
          selectedSku.push(attribute);
        }
      })
    })
   
    let price = 0
    product?.skus.forEach(item => {
      const values1 = item.attributes.map(item => item.value).sort();
      const values2 = selectedSku.map(item => item.value).sort();
      if(values1.every((val, index) => val === values2[index])){
        if(item.offer_price){
          price = item.offer_price
        }else{
          price = product.sale_info.price_range_list[product.sale_info.price_range_list.length - 1].price
        }
      }
    })
    if(product) {
      setProduct({
        ...product,
        price: price === 0 ? '无货' : price
      })
    }
  };

  // 处理颜色选择
  const handleColorSelect = (colorId: string, index: number) => {
    const newGroupList = [...groupList];
    const attributeIndex = newGroupList[index]?.attributes.findIndex(
      (item) => item.value === colorId
    );
    if (attributeIndex !== -1) {
      newGroupList[index].attributes = newGroupList[index].attributes.map(
        (item, i) => {
          if (i === attributeIndex) {
            return { ...item, has_color: true };
          }
          return { ...item, has_color: false };
        }
      );
      setGroupList(newGroupList);
    }
    
    const selectedSku:SkuAttribute[] = []
    groupList.forEach(item => {
      item.attributes.forEach(attribute => {
        if(attribute.has_color){          
          selectedSku.push(attribute);
        }
      })
    })
   
    let price = 0
    product?.skus.forEach(item => {
      const values1 = item.attributes.map(item => item.value).sort();
      const values2 = selectedSku.map(item => item.value).sort();
      
      if(values1.every((val, index) => val === values2[index])){
        if(item.offer_price){
          price = item.offer_price
        }else{
          price = product.sale_info.price_range_list[product.sale_info.price_range_list.length - 1].price
        }
      }
    })
    if(product) {
      setProduct({
        ...product,
        price: price === 0 ? '无货' : price
      })
    }
  };

  const getProductDetail = async () => {
    if (!route.params?.offer_id) return;
    const res = await productApi.getProductDetail(route.params.offer_id);
    if (res.skus != null) {
      const priceSelectedSku = res.skus.find(
        (item) => item.offer_price === route.params.price
      );
      if (priceSelectedSku) {
        res.price = priceSelectedSku.offer_price;
      } else {
        res.price = res.sale_info.price_range_list[res.sale_info.price_range_list.length - 1]?.price;
      }
    }else{
      res.price = route.params.price
    }
    if (res.skus != null) {
    const priceSelectedSku = res.skus.find(item => item.offer_price  === route.params.price)
    if (priceSelectedSku) {
      setPriceSelectedSku({
        price:route.params.price,
      })
    } 
  }   
    setPriceSelectedSku(priceSelectedSku)
    setProduct(res);
    let list:ProductGroupList[] = []
    if(res.skus != null){
     list = groupData(res,priceSelectedSku?.attributes as SkuAttribute[]);
    }else{
      list =  []
    }
    const imageUrls = [];
    const regex = /<img[^>]+src="([^"]+)"/g;
    let match;
  
    while ((match = regex.exec(res.description)) !== null) {
      imageUrls.push(match[1]); // match[1] 是 src 属性的值
    }
    setImageUrls(imageUrls);
    setGroupList(list);
  };

  const getSimilars = () => {
    productApi.getSimilarProducts(route.params.offer_id).then((res) => {
      setSimilars(res);
      setIsSimilarsFlag(true);
    });
  };
  useEffect(() => {
    getProductDetail();
    getSimilars();
  }, []);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (showBottomSheet) {
        setShowBottomSheet(false);
        return true;
      }
      return false;
    });

    return () => backHandler.remove();
  }, [showBottomSheet]);

  const handleImageLoad = (src: string, event: any) => {
    const { width: imageWidth, height: imageHeight } = event.nativeEvent.source;
    const aspectRatio = imageHeight / imageWidth;
    const calculatedHeight = width * aspectRatio;
    setImageHeights(prev => ({
      ...prev,
      [src]: calculatedHeight
    }));
  };

  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollViewContent}
      >
        <View style={styles.productDetailsContainer3}>
          <View style={styles.timeCardContainer}>
            <View style={styles.searchContainer1}>
              <TouchableOpacity onPress={() => {
                if (showBottomSheet) {
                  setShowBottomSheet(false);
                } else {
                  navigation.goBack();
                }
              }}>
                <View style={styles.svgContainer}>
                  <BackIcon size={fontSize(20)}/>
                </View>
              </TouchableOpacity>
             
              <View style={styles.searchContainer2}>
                <Text style={styles.searchTitleTextStyle}>Recherche</Text>
                <View style={styles.svgContainer1}>
                  <CameraIcon color="#373737" size={fontSize(18)}/>
                  {/* Replace with your SVG component or icon */}
                </View>
              </View>
              <View style={styles.searchContainer}>
                <View style={styles.svgContainer1}>
                  {/* Replace with your SVG component or icon */}
                </View>
                <View style={styles.svgContainer2}>
                  {/* Replace with your SVG component or icon */}
                </View>
              </View>
            </View>
          </View>
          <View style={styles.centerColumnWithPagination}>
            <View style={{ position: "relative" }}>
              <Carousel
                loop
                width={screenWidth}
                data={product?.product_image_urls as string[]}
                height={widthUtils(430, 430).height}
                onSnapToItem={(index) => setActiveIndex(index)}
                modeConfig={{
                  parallaxScrollingScale: 0.9,
                  parallaxScrollingOffset: 50,
                }}
                renderItem={({ item }) => (
                  <View
                    style={{
                      flex: 1,
                      justifyContent: "center",
                      alignItems: "center",
                      backgroundColor: "#f2f2f2",
                      borderRadius: 10,
                    }}
                  >
                    <Image
                      source={{ uri: item }}
                      style={{ width: "100%", height: "100%" }}
                    />
                  </View>
                )}
              />

              {/* 底部指示灯 - 固定在右下角 */}
              <View
                style={{
                  position: "absolute",
                  bottom: 20,
                  right: 20,
                  backgroundColor: "gray", // 可选，看得清楚
                  borderRadius: 13,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Text style={styles.activeIndexText}>
                  {activeIndex + 1}/{product?.product_image_urls.length}
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.productDetailsContainer2}>
            <View style={styles.nightLampProductCard}>
              <Text style={styles.creativeHeading}>{product?.subject}</Text>
              <View style={styles.productInfoContainer1}>
                <View style={styles.productInfoContainer}>
                  <View style={styles.salesInfoContainer}>
                    <Text style={styles.highlightedText}>{product?.price}</Text>
                    <Text style={styles.orangeHighlightedText}>FCFA</Text>
                    <View style={styles.priceBox}>
                      <Text style={styles.priceLabel}>3000FCFA</Text>
                      <View style={styles.priceContainer}></View>
                    </View>
                  </View>

                  <Text style={styles.salesCountLabel}>
                    {product?.sold_out} ventes
                  </Text>
                </View>

                <View style={styles.discountInfoContainer}>
                  <Text style={styles.emphasizedTextWidget}>-5%</Text>
                  <View style={styles.svgContainer4}>
                    {/* Replace with your SVG component or icon */}
                  </View>
                </View>
                <View style={styles.specialHighlightedSection}>
                  <View style={styles.svgContainer5}>
                    {/* Replace with your SVG component or icon */}
                  </View>
                </View>
                <View style={styles.vipStatusContainer}>
                  <View style={styles.vipBadgeContainer}>
                    <Text style={styles.vipStatusNumeric}>
                      <Text style={styles.emphasizedTextVip}>VIP</Text>
                      <Text style={styles.emphasizedText}> 1</Text>
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            <View style={styles.productDetailsContainer}>
              <View style={styles.productDetailsContainer1}>
                <View style={styles.blackThemeContainer}>
                  {groupList.map((item, index) =>
                    item.has_image ? (
                      <View key={item.attribute_name}>
                        <Text style={styles.uniqueTextBlock}>
                          {item.attribute_name} : {item.attributes.find(item => item.has_color)?.value}
                        </Text>
                        <View style={styles.horizontalFlexContainer}>
                          {getDisplayAttributes(
                            item.attributes,
                            item.attribute_name
                          ).map((attribute) => (
                            <TouchableOpacity
                              key={attribute.value}
                              onPress={() =>
                                handleColorSelect(attribute.value, index)
                              }
                              style={[
                                styles.colorImageContainer,
                                attribute.has_color &&
                                  styles.selectedColorImageContainer,
                              ]}
                            >
                              <Image
                                source={{ uri: attribute.sku_image_url }}
                                style={styles.imageContainer}
                              />
                            </TouchableOpacity>
                          ))}

                          {!expandedGroups[item.attribute_name] &&
                            item.attributes.length > 6 && (
                              <TouchableOpacity
                                style={styles.expandButton}
                                onPress={() =>
                                  toggleExpand(item.attribute_name)
                                }
                              >
                                <Text style={styles.expandButtonText}>
                                  更多
                                </Text>
                              </TouchableOpacity>
                            )}

                          {expandedGroups[item.attribute_name] && (
                            <TouchableOpacity
                              style={styles.expandButton}
                              onPress={() => toggleExpand(item.attribute_name)}
                            >
                              <Text style={styles.expandButtonText}>收起</Text>
                            </TouchableOpacity>
                          )}
                        </View>
                        
                        {
                          groupList.length > 1 && index === 0 && (
                            <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                          <View style={styles.svgContainer6}>
                            <DiagonalArrowIcon size={fontSize(18)}/>
                          </View>
                        </TouchableOpacity>
                          )
                        }
                        {
                          groupList.length === 1 && index === 0 && (
                            <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                          <View style={styles.svgContainer6}>
                            <DiagonalArrowIcon size={fontSize(18)}/>
                          </View>
                        </TouchableOpacity>
                          )
                        }
                      </View>
                    ) : (
                      <View key={item.attribute_name}>
                        <Text style={styles.uniqueTextBlock}>
                          {item.attribute_name}
                        </Text>

                        <View style={styles.horizontalFlexContainer}>
                          {getDisplayAttributes(
                            item.attributes,
                            item.attribute_name
                          ).map((attribute) => (
                            <TouchableOpacity
                              key={attribute.value}
                              onPress={() =>
                                handleSizeSelect(attribute.value, index)
                              }
                              style={[
                                styles.sizeButton,
                                attribute.has_color &&
                                  styles.selectedSizeButton,
                              ]}
                            >
                              <Text
                                style={[
                                  styles.sizeButtonText,
                                  attribute.has_color &&
                                    styles.selectedSizeText,
                                ]}
                              >
                                {attribute.value}
                              </Text>
                            </TouchableOpacity>
                          ))}

                          {!expandedGroups[item.attribute_name] &&
                            item.attributes.length > 6 && (
                              <TouchableOpacity
                                style={styles.expandButton}
                                onPress={() =>
                                  toggleExpand(item.attribute_name)
                                }
                              >
                                <Text style={styles.expandButtonText}>
                                  更多
                                </Text>
                              </TouchableOpacity>
                            )}

                          {expandedGroups[item.attribute_name] && (
                            <TouchableOpacity
                              style={styles.expandButton}
                              onPress={() => toggleExpand(item.attribute_name)}
                            >
                              <Text style={styles.expandButtonText}>收起</Text>
                            </TouchableOpacity>
                          )}
                        </View>
                        {
                          groupList.length === 1 && (
                            <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                          <View style={styles.svgContainer6}>
                            <DiagonalArrowIcon size={fontSize(18)}/>
                          </View>
                        </TouchableOpacity>
                          )
                        }

                      {
                          groupList.length === 2 && index === 0 && (
                            <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                          <View style={styles.svgContainer6}>
                            <DiagonalArrowIcon size={fontSize(18)}/>
                          </View>
                        </TouchableOpacity>
                          )
                        }
                      </View>
                    )
                  )}
                </View>
              </View>
            </View>
            <View style={styles.storeRecommendationsContainer}>
              <View style={styles.storeInfoContainer}>
                <Text style={styles.storeSectionTitle}>
                  More from this store
                </Text>
                <Text style={styles.storeMoreLink}>View All</Text>
              </View>

              <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={styles.productGridContainer}
              >
                {isSimilarsFlag &&
                  similars?.map((item) => (
                    <View style={styles.productCard} key={item.offer_id}>
                      <View style={styles.cardContainerWithPrice}>
                        <Image
                          source={{ uri: item.product_image_urls[0] }}
                          style={styles.imageContainerCompact}
                        />
                      </View>
                      <View style={styles.priceContainerFlex}>
                        <Text style={styles.highlightedText1}>
                          {item.max_price}
                        </Text>
                        <Text style={styles.highlightedTextWithBorder}>
                          FCFA
                        </Text>
                      </View>
                    </View>
                  ))}
              </ScrollView>
            </View>
            <View style={{ width: "100%" }}>
              {imageUrls.map((src, index) => (
                <View key={index} style={{ width: "100%" }}>
                  <Image
                    style={{
                      width: "100%",
                      height: imageHeights[src] || 200,
                      backgroundColor: "#f5f5f5",
                    }}
                    source={{ uri: src }}
                    resizeMode="contain"
                    onLoad={(event) => handleImageLoad(src, event)}
                  />
                </View>
              ))}
            </View>
          </View>
        </View>
      </ScrollView>
      <View style={styles.fixedBottomBar}>
        <TouchableOpacity style={styles.chatNowButton}>
          <WhiteCircleIcon color="#fff" size={fontSize(20)} />
          <Text style={styles.chatNowText}>chatNow</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.addToCartButton}
          // onPress={() => setShowBottomSheet(true)}
        >
          <ShoppingCartIcon color="#fff" size={fontSize(20)} />
          <Text style={styles.addToCartText}>addToCart</Text>
        </TouchableOpacity>
      </View>

      {showBottomSheet && product && (
         <View style={styles.bottomSheetOverlay}>
           <Animated.View
            style={[
              styles.bottomSheet,
            ]}
           >
            <ProductCard onClose={() => setShowBottomSheet(false)} product={product} groupList={groupList}></ProductCard>
           </Animated.View>
         </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: "white",
  },
  scrollViewContent: {
    flexGrow: 1,
  },
  productDetailsContainer3: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    backgroundColor: "white",
  },
  timeCardContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 3,
    paddingBottom: 15,
    paddingLeft: 18,
  },
  timeInfoContainer: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 38,
  },
  timeDisplay: {
    width: 42,
    fontWeight: "600",
    fontSize: fontSize(17),
    color: "black",
    textAlign: "center",
  },
  timeDisplayContainer: {
    width: widthUtils(54,154).width,
    height: widthUtils(54,54).height,
  },
  searchContainer1: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 2,
  },
  svgContainer: {
    width: widthUtils(18,18).width,
    height: widthUtils(18,18).height,
  },
  searchContainer2: {
    flex: 1,
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    height: widthUtils(50,50).height,
    paddingRight: 20,
    paddingLeft: 16,
    marginLeft: 4,
    backgroundColor: "#f4f4f4",
    borderWidth: 1,
    borderColor: "#eeeeee",
    borderRadius: 25,
  },
  searchTitleTextStyle: {
    fontWeight: "600",
    fontSize: fontSize(16),
    color: "#747474",
  },
  svgContainer1: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    color: "#373737",
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginLeft: 9,
  },
  svgContainer2: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    marginLeft: 11,
    color: "#373737",
  },
  productDetailsContainer2: {
    backgroundColor: "#f4f4f4",
  },
  centerColumnWithPagination: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    backgroundColor: "#f4f4f4",
  },
  centerContentWithPaginationButton: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  sidebarContainer: {
    paddingLeft: 350,
  },
  centerIconContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: widthUtils(40,40).width,
    height: widthUtils(40,40).height,
    backgroundColor: "#efefef",
    borderRadius: 25,
  },
  centerBox1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: widthUtils(60,60).width,
    height: widthUtils(60,60).height,
    marginTop: 125,
    backgroundColor: "rgba(92, 92, 92, 0.6)",
    borderWidth: 1,
    borderColor: "white",
    borderRadius: 35,
  },
  svgContainer3: {
    width: widthUtils(20,20).width,
    height: widthUtils(20,20).height,
    color: "#ffffff",
  },
  darkButton: {
    alignSelf: "flex-end",
    width: widthUtils(26,50).width,
    height: widthUtils(26,50).height,

    minWidth: 50,
    marginTop: 147,
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "white",
    backgroundColor: "rgba(44, 44, 44, 0.7)",
    borderRadius: 13,
  },
  nightLampProductCard: {
    width: "100%",
    padding: 16,
    paddingLeft: 19,
    paddingBottom: 23,
    backgroundColor: "white",
  },
  creativeHeading: {
    width: "100%",
    fontWeight: "600",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "black",
    textAlign: "left",
  },
  productInfoContainer1: {
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "flex-start",
    marginTop: 10.5,
  },
  productInfoContainer: {
    alignSelf: "flex-start",
  },
  salesInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  highlightedText: {
    fontWeight: "700",
    fontSize: fontSize(30),
    color: "#ff5100",
  },
  orangeHighlightedText: {
    fontWeight: "700",
    fontSize: fontSize(14),
    marginLeft: 1.25,
    color: "#ff5100",
    lineHeight: 28,
  },
  salesCountLabel: {
    marginTop: 6.75,
    fontWeight: "600",
    fontSize: fontSize(14),
    color: "#7c7c7c",
  },
  priceBox: {
    paddingTop: 12,
    marginLeft: -0.2,
  },
  priceLabel: {
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "#9a9a9a",
  },
  priceContainer: {
    width: "100%",
    marginTop: -4.75,
    borderTopWidth: 1,
    borderTopColor: "#9a9a9a",
  },
  discountInfoContainer: {
    flexDirection: "column",
    alignItems: "center",
    alignSelf: "flex-start",
    justifyContent: "flex-start",
    paddingBottom: 16,
    marginLeft: 10.5,
  },
  emphasizedTextWidget: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(11),
    color: "#4e2000",
  },
  svgContainer4: {
    width: widthUtils(32,32).width,
    height: widthUtils(32,32).height,
    marginTop: -26,
  },
  specialHighlightedSection: {
    paddingBottom: 20.5,
    marginLeft: -1.75,
  },
  svgContainer5: {
    width: widthUtils(10,10).width,
    height: widthUtils(10,10).height,
    color: "#3b3b3b",
  },
  vipStatusContainer: {
    paddingBottom: 21,
    marginLeft: -2.5,
  },
  vipBadgeContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-end",
    paddingRight: 10,
    paddingLeft: 10,
    backgroundColor: "#3b3b3b",
    borderRadius: 5,
    borderBottomLeftRadius: 0,
  },
  vipStatusNumeric: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
  },
  emphasizedTextVip: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
  },
  emphasizedText: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
    letterSpacing: -2,
  },
  productDetailsContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 13,
    marginTop: 8,
    backgroundColor: "white",
  },
  productDetailsContainer1: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
  },
  blackThemeContainer: {},
  uniqueTextBlock: {
    fontWeight: "600",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "black",
  },
  horizontalFlexContainer: {
    width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 10,
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 8,
  },
  imageContainer: {
    width: widthUtils(40,40).width,
    height: widthUtils(40,40).height,
    borderRadius: 5,
  },
  centerBox: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: widthUtils(40,40).width,
    backgroundColor: "#e0e0e0",
    borderRadius: 5,
  },
  imageContainerStyles: {
    height: widthUtils(40,40).height,
  },
  svgContainer6: {
    alignSelf: "flex-end",
    width: widthUtils(18,18).width,
    height: widthUtils(18,18).height,
  },
  sizeSelector: {
    marginTop: 0,
  },
  numericHighlightedTextContainer: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 30).height,
    paddingHorizontal: 11,
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#ff5100",
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5100",
    borderRadius: 5,
  },
  numberBadge: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#373737",
    backgroundColor: "#efefef",
    borderRadius: 5,
    lineHeight: widthUtils(40, 40).height,
    marginBottom: 10,
  },
  sizeButton: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    backgroundColor: "#efefef",
    borderRadius: 5,
    marginBottom: 10,
  },
  sizeButtonText: {
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#373737",
    lineHeight: widthUtils(40, 40).height,
  },
  selectedSizeButton: {
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5217",
  },
  selectedSizeText: {
    color: "#ff5217",
    fontWeight: "600",
  },
  expandButton: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    fontWeight: "600",
    fontSize: fontSize(14),
    color: "#ff5100",
    backgroundColor: "#fff5f0",
    borderRadius: 5,
    lineHeight: widthUtils(40, 40).height,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: "#ff5100",
  },
  expandButtonText: {
    color: "#ff5100",
    fontWeight: "600",
  },
  storeRecommendationsContainer: {
    width: "100%",
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 19,
    marginTop: 8,
    backgroundColor: "white",
  },
  storeInfoContainer: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
  },
  storeSectionTitle: {
    fontWeight: "600",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "black",
  },
  storeMoreLink: {
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "#747474",
  },
  productGridContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    marginTop: 12,
    paddingRight: 10,
  },
  productCard: {
    width: widthUtils(115,90).width,
    height: widthUtils(115,90).height,
    marginRight: 10,
  },
  cardContainerWithPrice: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    backgroundColor: "#e0e0e0",
    borderRadius: 5,
  },
  imageContainerCompact: {
    height: widthUtils(90,90).height,
    width: widthUtils(90,90).width,
  },
  priceContainerFlex: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 2,
  },
  highlightedText1: {
    fontWeight: "700",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "#ff5100",
  },
  highlightedTextWithBorder: {
    fontWeight: "700",
    fontSize: fontSize(10),
    marginLeft: 1.25,
    color: "#ff5100",
  },
  productImageContainer: {
    width: "100%",
    height: widthUtils(90,90).height,
    borderRadius: 5,
  },
  orangeHighlightTextStyle: {
    fontWeight: "700",
    fontSize: fontSize(16),
    lineHeight: widthUtils(20,20).height,
    marginTop: 2,
    color: "#ff5100",
  },
  productDetailsContainer4: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    marginTop: 8,
    backgroundColor: "white",
  },
  productDetailsContainer5: {
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 183,
  },
  productDetailsDescription: {
    width: "100%",
    marginTop: 8,
    fontWeight: "400",
    fontSize: fontSize(14),
    lineHeight: widthUtils(20,20).height,
    color: "#373737",
    textAlign: "left",
  },
  imageContainer1: {
    marginTop: -165,
    marginRight: 20,
    marginLeft: 20,
  },
  imageContainerStyles1: {
    width: widthUtils(229,390).width,
    height: widthUtils(229,390).height,
  },
  flexCenterButtons: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(64,64).height,
    paddingRight: 20,
    paddingLeft: 20,
    marginTop: -64,
    backgroundColor: "white",
  },
  gradientButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 4,
    width: widthUtils(50,160).width,
    height: widthUtils(50,160).height,
    minWidth: 160,
    fontWeight: "700",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "white",
    backgroundColor:
      "linear-gradient(90deg, rgba(0, 183, 68, 1) 0%, rgba(28, 207, 95, 1) 100%)",
    borderRadius: 30,
  },
  svgContainer7: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    color: "#ffffff",
  },
  orangeGradientButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 7,
    width: widthUtils(50,220).width,
    height: widthUtils(50,220).height,
    minWidth: 220,
    marginLeft: 10,
    fontWeight: "700",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "white",
    backgroundColor:
      "linear-gradient(90deg, rgba(255, 128, 0, 1) 0%, rgba(255, 81, 0, 1) 100%)",
    borderRadius: 30,
  },
  activeIndexText: {
    color: "white",
    fontSize: fontSize(12),
    width: widthUtils(26, 50).width,
    height: widthUtils(26, 50).height,
    textAlign: "center",
    lineHeight: widthUtils(26, 50).height + 2,
  },
  colorImageContainer: {
    padding: 2,
    borderRadius: 5,
  },
  selectedColorImageContainer: {
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5217",
  },
  fixedBottomBar: {
    position: "absolute",
    bottom: 10,
    left: 0,
    right: 0,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 15,
    backgroundColor: "transparent",
    zIndex: 100,
    height: widthUtils(60,60).height,
  },
  chatNowButton: {
    width: "40%",
    height: widthUtils(50, 50).height,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 0,
    borderRadius: 30,
    backgroundColor: "#4CAF50",
    marginRight: 10,
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  chatNowText: {
    fontSize: fontSize(18),
    color: "#fff",
    fontWeight: "bold",
    marginLeft: 8,
  },
  addToCartButton: {
    width: "60%",
    height: widthUtils(50,50).height,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 0,
    borderRadius: 30,
    backgroundColor: "#FF5722",
    marginLeft: 10,
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  addToCartText: {
    fontSize: fontSize(18),
    color: "#fff",
    fontWeight: "bold",
    marginLeft: 8,
  },
  modalContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    height: '90%',
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
  },
  closeButton: {
    alignSelf: 'flex-end',
    padding: 10,
  },
  closeButtonText: {
    fontSize: fontSize(16),
    color: '#333',
  },
  bottomSheetOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "flex-end",
    zIndex: 200,
  },
  bottomSheet: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    height: "85%",
    zIndex: 1,
  },
});