// src/screens/HomeScreen.tsx
import React, { useState } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Dimensions,
  Image,
  ImageBackground,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import { globalStyles } from "../styles/globalStyles";
import Swiper from "react-native-swiper";
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 Footer from "../components/footer/Footer";

var winWidth = Dimensions.get("window").width; //full width
var winHeight = Dimensions.get("window").height; //full height
const ratio = winWidth / 930;
const HomeScreen: React.FC = () => {
  const navigation = useNavigation<NavigationProp<any>>();

  return (
    <AppLayout activeTab="homepage">
      <ScrollView>
        <SliderHome />
        <BoxMenuHome />
        <BoxProductReviewTop />
        <BoxCategoryHome />
        <BoxBusiness />
        <BoxProductSaveHome />
        <BoxArticleBranch />
        <BoxArticleSale />
        <BoxArticleClassifieds />
        <BoxBannerSaleHome />
        <BoxPromotionHome />
        <Footer navigation={navigation} />
      </ScrollView>
    </AppLayout>
  );
};

const SliderHome = () => {
  return (
    <View style={styles.slider}>
      <Swiper
        style={styles.sliderSwipper}
        autoplay={false}
        autoplayTimeout={3}
        showsButtons={true}
        showsPagination={false}
        nextButton={
          <Ionicons
            name="chevron-forward-outline"
            size={30}
            color="white"
            style={styles.buttonNext}
          />
        }
        prevButton={
          <Ionicons
            name="chevron-back-outline"
            size={30}
            color="white"
            style={styles.buttonPrev}
          />
        }
      >
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="cover"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="cover"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="cover"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="cover"
          />
        </View>
      </Swiper>
    </View>
  );
};

const BoxMenuHome = () => {
  return (
    <View style={styles.boxMenuHome}>
      <TouchableOpacity style={styles.MenuItem}>
        <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}>
        <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}>
        <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);

  return (
    <View style={globalStyles.boxCategoryHome}>
      <Text style={globalStyles.textBoxCategoryHome}>Tìm theo danh mục</Text>
      <Swiper
        style={globalStyles.listCategoryBox}
        loop={false}
        showsPagination={true}
        dot={<View style={globalStyles.dot} />}
        activeDot={<View style={globalStyles.activeDot} />}
        paginationStyle={{
          bottom: 10,
        }}
      >
        {chunkedItems.map((group, slideIndex) => (
          <View
            key={`slide-${slideIndex}`}
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
            }}
          >
            {group.map((item) => (
              <TouchableOpacity key={item.id} style={globalStyles.categoryItem}>
                <View style={globalStyles.boxImageCategory}>
                  <Image
                    source={require("../../assets/images/category-laptop.png")}
                    style={globalStyles.iconCategory}
                  />
                </View>
                <Text style={globalStyles.categoryName}>{item.name}</Text>
              </TouchableOpacity>
            ))}
          </View>
        ))}
      </Swiper>
    </View>
  );
};

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

      <Swiper
        style={globalStyles.sliderBusinesses}
        autoplay={false}
        showsPagination={true}
        dot={<View style={globalStyles.dot} />}
        activeDot={<View style={globalStyles.activeDot} />}
        paginationStyle={{
          bottom: 10,
        }}
      >
        <View
          style={{
            flexDirection: "row",
            paddingHorizontal: 10,
          }}
        >
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-hacom.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-hacom.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-anphat.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-gearvn.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
        </View>
        <View
          style={{
            flexDirection: "row",
            paddingHorizontal: 10,
          }}
        >
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-hacom.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-hacom.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-anphat.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.logoItem}>
            <Image
              source={require("../../assets/images/logo-gearvn.png")}
              style={globalStyles.logoImage}
            />
          </TouchableOpacity>
        </View>
      </Swiper>
    </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 = () => {
  return (
    <View style={globalStyles.BoxBannerSaleHome}>
      <Swiper
        style={globalStyles.sliderBannerSale}
        autoplay={false}
        showsPagination={true}
        dot={<View style={globalStyles.dot} />}
        activeDot={<View style={globalStyles.activeDot} />}
        paginationStyle={{
          bottom: 10,
        }}
      >
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-1.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-2.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
        </View>
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-2.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-3.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
        </View>
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-3.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
          <TouchableOpacity style={globalStyles.itemBannerSale}>
            <Image
              source={require("../../assets/images/banner-sale-1.png")}
              style={globalStyles.imgBannerSale}
              alt="anh tin tuc"
            />
          </TouchableOpacity>
        </View>
      </Swiper>
    </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,
  },
  sliderSwipper: {
    height: 210,
    width: "100%",
    overflow: "hidden",
    borderRadius: 10,
  },
  imgContainer: {
    width: "100%",
    borderRadius: 10,
    overflow: "hidden",
    objectFit: "cover",
  },
  imgSlider: {
    width: winWidth,
    height: "100%",
    objectFit: "cover",
    overflow: "hidden",
    borderRadius: 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: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginLeft: 20,
    marginRight: 20,
    gap: 20,
    backgroundColor: "#fff",
  },
  MenuItem: {
    width: winWidth / 4 - 25,
  },
  boxIconMenu: {
    width: 50,
    height: 50,
    marginBottom: 5,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#eeeeee",
    borderRadius: 25,
    marginLeft: "auto",
    marginRight: "auto",
  },
  textMenu: {
    textAlign: "center",
    fontSize: 14,
    color: "#333",
    fontWeight: "bold",
  },
  iconMenuItem: {
    width: 20,
    resizeMode: "contain",
  },
  iconlocationMenuItem: {
    width: 13,
    resizeMode: "contain",
  },
});
