// src/screens/HomeScreen.tsx
import React, { useState, useRef } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Dimensions,
  Image,
  ImageBackground,
  TouchableOpacity,
  SafeAreaView,
  ScrollViewBase,
} from "react-native";
import { globalStyles } from "../styles/globalStyles";
import { Ionicons } from "@expo/vector-icons";
import { products } from "../data/product";
import ProductItem from "../components/product/ItemProduct";
import ProductItemSave from "../components/product/itemProductSave";
import { categories } from "../data/category";
import chunk from "lodash/chunk";
import { globalAgent } from "http";
import { WebView } from "react-native-webview";
import AppLayout from "../layouts/AppLayout";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";

var winWidth = Dimensions.get("window").width; //full width
var winHeight = Dimensions.get("window").height; //full height

const HomeScreen: React.FC = () => {
  const navigation = useNavigation<NavigationProp<any>>();
  return (
    <AppLayout activeTab="homepage">
      <ScrollView
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={true}
      >
        <SliderHome />
        <BoxMenuHome />
        <BoxProductReviewTop />
        <BoxCategoryHome />
        <BoxBusiness />
        <BoxProductSaveHome />
        <BoxArticleBranch />
        <BoxArticleSale />
        <BoxArticleClassifieds />
        <BoxBannerSaleHome />
        <BoxPromotionHome />
      </ScrollView>
    </AppLayout>
  );
};

const SliderHome = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef<ICarouselInstance>(null);

  const handleDotPress = (index: number) => {
    if (carouselRef.current) {
      carouselRef.current?.scrollTo({ index, animated: true });
    }
  };

  const banner_list = [
    require("../../assets/images/banner_slider.png"),
    require("../../assets/images/banner_slider.png"),
    require("../../assets/images/banner_slider.png"),
    require("../../assets/images/banner_slider.png"),
  ];

  return (
    <View style={styles.slider}>
      <Carousel
        loop
        autoPlay
        autoPlayInterval={3000}
        width={winWidth}
        height={200}
        data={banner_list}
        scrollAnimationDuration={1000}
        onSnapToItem={(index) => {
          setCurrentIndex(index);
        }}
        renderItem={({ item }) => (
          <Image source={item} style={styles.imgSlider} resizeMode="cover" />
        )}
      />
      <View style={globalStyles.dotWrapper}>
        {banner_list.map((_, index) => (
          <TouchableOpacity key={index} onPress={() => handleDotPress(index)}>
            <View
              key={index}
              style={[
                globalStyles.dot,
                currentIndex === index && globalStyles.activeDot,
              ]}
            />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const BoxMenuHome = () => {
  const navigation = useNavigation<NavigationProp<any>>();
  return (
    <View style={styles.boxMenuHome}>
      <TouchableOpacity
        style={styles.MenuItem}
        onPress={() => navigation.navigate("buildpc" as never)}
      >
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_buildpc.png")}
            style={styles.iconMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Build pc</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.MenuItem}
        onPress={() => navigation.navigate("classifieds" as never)}
      >
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_store.png")}
            style={styles.iconMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Tìm người bán</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.MenuItem}
        onPress={() => navigation.navigate("repairaddress" as never)}
      >
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_location.png")}
            style={styles.iconlocationMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Địa chỉ sửa chữa</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.MenuItem}>
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_box.png")}
            style={styles.iconMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Sản phẩm đã lưu</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.MenuItem}>
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_article.png")}
            style={styles.iconMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Tin rao vặt</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.MenuItem}>
        <View style={styles.boxIconMenu}>
          <Image
            source={require("../../assets/images/icon_question.png")}
            style={styles.iconMenuItem}
          />
        </View>
        <Text style={styles.textMenu}>Hỏi đáp</Text>
      </TouchableOpacity>
    </View>
  );
};

const BoxProductReviewTop = () => {
  const [activeIndex, setActiveIndex] = useState(1);

  const listTab = [
    {
      id: 1,
      name: "Laptop",
    },
    {
      id: 2,
      name: "Màn hình",
    },
    {
      id: 3,
      name: "Bàn phím",
    },
    {
      id: 4,
      name: "Cpu",
    },
    {
      id: 5,
      name: "Chuột",
    },
    {
      id: 6,
      name: "Ram",
    },
  ];

  return (
    <View style={globalStyles.boxProductReviewTop}>
      <Text style={globalStyles.textBoxProductReviewTop}>
        Sản phẩm được đánh giá tốt nhất
      </Text>
      <Text style={globalStyles.noteTextReviewTop}>
        Tổng hợp các sản phẩm hot theo xu hướng và có nhiều lượt review và đánh
        giá nhất hiện nay
      </Text>

      <ScrollView horizontal={true} style={globalStyles.listTab}>
        {listTab.map((item, index) => (
          <TouchableOpacity
            style={[
              globalStyles.tabItem,
              activeIndex === item.id && globalStyles.activeItem,
            ]}
            key={item.id}
            onPress={() => setActiveIndex(item.id)}
          >
            <Text
              style={[
                globalStyles.textTabItem,
                activeIndex === item.id && globalStyles.activeText,
              ]}
            >
              {item.name}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <View style={globalStyles.listProduct}>
        {products.map((item) => (
          <ProductItem key={item.id} product={item} />
        ))}
      </View>

      <TouchableOpacity>
        <Text style={globalStyles.moreAll}>Xem tất cả</Text>
      </TouchableOpacity>
    </View>
  );
};

const BoxCategoryHome = () => {
  const chunkedItems = chunk(categories, 8);
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef<ICarouselInstance>(null);

  const handleDotPress = (index: number) => {
    if (carouselRef.current) {
      carouselRef.current?.scrollTo({ index, animated: true });
    }
  };
  return (
    <View style={globalStyles.boxCategoryHome}>
      <Text style={globalStyles.textBoxCategoryHome}>Tìm theo danh mục</Text>
      <Carousel
        loop={false}
        width={winWidth}
        height={300}
        data={chunkedItems}
        scrollAnimationDuration={500}
        onSnapToItem={(index) => setActiveIndex(index)}
        renderItem={({ item }) => (
          <View
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
              justifyContent: "space-between",
              paddingHorizontal: 10,
            }}
          >
            {item.map((cat) => (
              <TouchableOpacity key={cat.id} style={globalStyles.categoryItem}>
                <View style={globalStyles.boxImageCategory}>
                  <Image
                    source={require("../../assets/images/category-laptop.png")}
                    style={globalStyles.iconCategory}
                  />
                </View>
                <Text style={globalStyles.categoryName}>{cat.name}</Text>
              </TouchableOpacity>
            ))}
          </View>
        )}
      />
      <View style={globalStyles.dotWrapper}>
        {chunkedItems.map((_, index) => (
          <TouchableOpacity key={index} onPress={() => handleDotPress(index)}>
            <View
              key={index}
              style={[
                globalStyles.dot,
                activeIndex === index && globalStyles.activeDot,
              ]}
            />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const BoxBusiness = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef<ICarouselInstance>(null);

  const handleDotPress = (index: number) => {
    if (carouselRef.current) {
      carouselRef.current?.scrollTo({ index, animated: true });
    }
  };

  const slides = [
    [
      require("../../assets/images/logo-hacom.png"),
      require("../../assets/images/logo-hacom.png"),
      require("../../assets/images/logo-anphat.png"),
      require("../../assets/images/logo-gearvn.png"),
    ],
    [
      require("../../assets/images/logo-hacom.png"),
      require("../../assets/images/logo-hacom.png"),
      require("../../assets/images/logo-anphat.png"),
      require("../../assets/images/logo-gearvn.png"),
    ],
  ];

  return (
    <View style={globalStyles.BoxBusiness}>
      <Text style={globalStyles.textBoxBusiness}>DOANH NGHIỆP NỔI BẬT</Text>

      <Carousel
        style={globalStyles.sliderBusinesses}
        loop={false}
        width={winWidth}
        height={45}
        data={slides}
        scrollAnimationDuration={500}
        onSnapToItem={(index) => setCurrentIndex(index)}
        renderItem={({ item }) => (
          <View style={{ flexDirection: "row", paddingHorizontal: 10 }}>
            {item.map((logo, idx) => (
              <TouchableOpacity key={idx} style={globalStyles.logoItem}>
                <Image source={logo} style={globalStyles.logoImage} />
              </TouchableOpacity>
            ))}
          </View>
        )}
      />

      {/* Custom Dots */}
      <View
        style={{
          flexDirection: "row",
          justifyContent: "center",
          marginTop: 10,
        }}
      >
        {slides.map((_, index) => (
          <TouchableOpacity key={index} onPress={() => handleDotPress(index)}>
            <View
              key={index}
              style={[
                globalStyles.dot,
                currentIndex === index && globalStyles.activeDot,
              ]}
            />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const BoxProductSaveHome = () => {
  return (
    <View style={globalStyles.BoxProductSaveHome}>
      <Text style={globalStyles.textBoxProductSaveHome}>SẢN PHẨM ĐÃ LƯU</Text>

      <View style={globalStyles.listProduct}>
        {products.map((item) => (
          <ProductItemSave key={item.id} product={item} />
        ))}
      </View>
    </View>
  );
};

const BoxArticleBranch = () => {
  return (
    <View style={globalStyles.BoxArticleBranch}>
      <Text style={globalStyles.textBoxArticleBranche}>THÔNG TIN NGÀNH</Text>
      <View style={globalStyles.boxListArticle}>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      <TouchableOpacity>
        <Text style={globalStyles.btnMore}>Xem tất cả</Text>
      </TouchableOpacity>
    </View>
  );
};

const BoxArticleSale = () => {
  return (
    <View style={globalStyles.BoxArticleBranch}>
      <Text style={globalStyles.textBoxArticleBranche}>
        THÔNG TIN khuyến mại
      </Text>
      <View style={globalStyles.boxListArticle}>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Xu hướng công nghệ nhìn từ CES 2025
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={2}>
              Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI là xu hướng chính
              nhưng được...
            </Text>
            <View style={globalStyles.itemArtTime}>
              <View style={globalStyles.flex}>
                <Ionicons name="time" size={16} color="#5a5a5a" />
                <Text style={globalStyles.itemArtDate}>12/03/2025</Text>
              </View>
              <View style={globalStyles.flex}>
                <Ionicons
                  name="link"
                  size={16}
                  style={{ marginLeft: 10 }}
                  color="#5a5a5a"
                />
                <Text style={globalStyles.itemArtSource}>
                  Nguồn tin: vnexpress
                </Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      <TouchableOpacity>
        <Text style={globalStyles.btnMore}>Xem tất cả</Text>
      </TouchableOpacity>
    </View>
  );
};

const BoxArticleClassifieds = () => {
  return (
    <View style={globalStyles.BoxArticleBranch}>
      <Text style={globalStyles.textBoxArticleBranche}>THÔNG TIN rao vặt</Text>
      <View style={globalStyles.boxListArticle}>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Mac air màu xám 256GB like new
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={1}>
              Intel Core i5 / 8GB / 256GB / SSD
            </Text>
            <Text style={globalStyles.itemArtPrice}>19.999.000đ</Text>
            <View style={globalStyles.itemArtlocal}>
              <Ionicons name="location-sharp" size={16} color="#5a5a5a" />
              <Text style={globalStyles.textArtlocal}>Quận thanh xuân</Text>
            </View>
            <View style={globalStyles.itemArtUploadtime}>
              <Ionicons
                name="time"
                size={16}
                style={{ marginRight: 3 }}
                color="#5a5a5a"
              />
              <Text>30 phút trước </Text>
              <Text>|</Text>
              <Text> Còn 05 ngày</Text>
            </View>
            <View style={globalStyles.itemArtUser}>
              <Image
                source={require("../../assets/images/avartar.png")}
                style={globalStyles.imgAvatar}
                alt="anh tin tuc"
              />
              <Text style={globalStyles.itemArtNameUser}>Thanh mai</Text>
            </View>
          </View>
        </View>
        <View style={globalStyles.itemArticle}>
          <TouchableOpacity style={globalStyles.itemArticleImg}>
            <Image
              source={require("../../assets/images/image-article.png")}
              style={globalStyles.imgArticle}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <View style={globalStyles.infoArticle}>
            <TouchableOpacity>
              <Text style={globalStyles.itemArtName} numberOfLines={1}>
                Mac air màu xám 256GB like new
              </Text>
            </TouchableOpacity>
            <Text style={globalStyles.itemArtSummary} numberOfLines={1}>
              Intel Core i5 / 8GB / 256GB / SSD
            </Text>
            <Text style={globalStyles.itemArtPrice}>19.999.000đ</Text>
            <View style={globalStyles.itemArtlocal}>
              <Ionicons name="location-sharp" size={16} color="#5a5a5a" />
              <Text style={globalStyles.textArtlocal}>Quận thanh xuân</Text>
            </View>
            <View style={globalStyles.itemArtUploadtime}>
              <Ionicons
                name="time"
                size={16}
                style={{ marginRight: 3 }}
                color="#5a5a5a"
              />
              <Text>30 phút trước </Text>
              <Text>|</Text>
              <Text> Còn 05 ngày</Text>
            </View>
            <View style={globalStyles.itemArtUser}>
              <Image
                source={require("../../assets/images/avartar.png")}
                style={globalStyles.imgAvatar}
                alt="anh tin tuc"
              />
              <Text style={globalStyles.itemArtNameUser}>Thanh mai</Text>
            </View>
          </View>
        </View>
      </View>
      <TouchableOpacity>
        <Text style={globalStyles.btnMore}>Xem tất cả</Text>
      </TouchableOpacity>
    </View>
  );
};

const BoxBannerSaleHome = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef<ICarouselInstance>(null);

  const slides = [
    [
      require("../../assets/images/banner-sale-1.png"),
      require("../../assets/images/banner-sale-2.png"),
    ],
    [
      require("../../assets/images/banner-sale-2.png"),
      require("../../assets/images/banner-sale-3.png"),
    ],
    [
      require("../../assets/images/banner-sale-3.png"),
      require("../../assets/images/banner-sale-1.png"),
    ],
  ];

  const handleDotPress = (index: number) => {
    if (carouselRef.current) {
      carouselRef.current.scrollTo({ index, animated: true });
    }
  };

  return (
    <View style={globalStyles.BoxBannerSaleHome}>
      <Carousel
        ref={carouselRef}
        width={winWidth}
        height={220}
        data={slides}
        loop
        autoPlay
        autoPlayInterval={5000}
        scrollAnimationDuration={600}
        onSnapToItem={(index) => setActiveIndex(index)}
        renderItem={({ item }) => (
          <View style={{ flexDirection: "row", paddingHorizontal: 10 }}>
            {item.map((logo, idx) => (
              <TouchableOpacity key={idx} style={globalStyles.itemBannerSale}>
                <Image source={logo} style={globalStyles.imgBannerSale} />
              </TouchableOpacity>
            ))}
          </View>
        )}
      />
      <View style={globalStyles.dotWrapper}>
        {slides.map((_, index) => (
          <TouchableOpacity key={index} onPress={() => handleDotPress(index)}>
            <View
              style={
                index === activeIndex
                  ? globalStyles.activeDot
                  : globalStyles.dot
              }
            />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const BoxPromotionHome = () => {
  const [showVideo, setShowVideo] = useState(false);

  const videoId = "LcQBXGLWX8I";
  const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1`;

  return (
    <View style={globalStyles.BoxPromotionHome}>
      <Text style={globalStyles.textBoxArticleBranche}>Sự kiện</Text>
      <Text style={globalStyles.textBoxArticleBranche}>
        và chương trình khuyến mãi
      </Text>
      <View style={globalStyles.containerVideo}>
        {showVideo ? (
          <WebView
            source={{ uri: embedUrl }}
            style={globalStyles.boxVideo}
            allowsFullscreenVideo
          />
        ) : (
          <TouchableOpacity
            onPress={() => setShowVideo(true)}
            style={globalStyles.touchArea}
          >
            <View style={globalStyles.overlay} />
            <Image
              source={require("../../assets/images/banner-sale-2.png")}
              style={globalStyles.imageYoutobe}
              resizeMode="cover"
            />
            <Ionicons
              name="logo-youtube"
              size={34}
              color="red"
              style={globalStyles.iconPlay}
            />
            <View style={globalStyles.infoVideo}>
              <View style={globalStyles.flex}>
                <Ionicons name="time-outline" size={20} color="white" />
                <Text style={{ color: "#fff", marginLeft: 5 }}>
                  10pm 25/02/2025
                </Text>
              </View>
              <Text style={{ color: "#fff", marginTop: 4, fontWeight: 700 }}>
                Showroom laptop 2025 tại Hà Nội{" "}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      </View>

      <View style={globalStyles.listEvenBanner}>
        <TouchableOpacity style={globalStyles.itemEven}>
          <Image
            source={require("../../assets/images/promotions-1.png")}
            style={globalStyles.imgEven}
            alt="anh tin tuc"
          />
        </TouchableOpacity>
        <TouchableOpacity style={globalStyles.itemEven}>
          <Image
            source={require("../../assets/images/promotions-2.png")}
            style={globalStyles.imgEven}
            alt="anh tin tuc"
          />
        </TouchableOpacity>
        <TouchableOpacity style={globalStyles.itemEven}>
          <Image
            source={require("../../assets/images/promotions-3.png")}
            style={globalStyles.imgEven}
            alt="anh tin tuc"
          />
        </TouchableOpacity>
        <TouchableOpacity style={globalStyles.itemEven}>
          <Image
            source={require("../../assets/images/promotions-4.png")}
            style={globalStyles.imgEven}
            alt="anh tin tuc"
          />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  homePage: {
    backgroundColor: "#fff",
  },
  slider: {
    width: winWidth - 20,
    overflow: "hidden",
    borderRadius: 10,
    margin: 10,
    flex: 1,
  },
  sliderSwipper: {
    height: 210,
    width: "100%",
    overflow: "hidden",
    borderRadius: 10,
  },
  imgContainer: {
    width: "100%",
    borderRadius: 10,
    overflow: "hidden",
    objectFit: "cover",
  },
  imgSlider: {
    width: winWidth - 20,
    height: "100%",
    objectFit: "cover",
    overflow: "hidden",
    borderRadius: 10,
    marginRight: 10,
  },
  buttonNext: {
    color: "#fff", // Màu chữ cho các nút chuyển
    fontSize: 18,
    fontWeight: "bold",
  },
  buttonPrev: {
    color: "#fff", // Màu chữ cho các nút chuyển
    fontSize: 18,
    fontWeight: "bold",
  },
  boxMenuHome: {
    marginTop: 10,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
    marginLeft: 20,
    gap: 10,
    backgroundColor: "#fff",
  },
  MenuItem: {
    width: winWidth / 4 - 20,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  boxIconMenu: {
    width: 50,
    height: 50,
    marginBottom: 5,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#eeeeee",
    borderRadius: 25,
    flexDirection: "row",
    margin: "auto",
  },
  textMenu: {
    textAlign: "center",
    fontSize: 14,
    color: "#333",
    fontWeight: "bold",
    height: 35,
  },
  iconMenuItem: {
    width: 20,
    resizeMode: "contain",
  },
  iconlocationMenuItem: {
    width: 13,
    resizeMode: "contain",
  },
});
