// src/screens/HomeScreen.tsx
import React, { useState } from "react";
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 { categories } from "../data/category";

var winWidth = Dimensions.get("window").width; //full width
var winHeight = Dimensions.get("window").height; //full height
const ratio = winWidth / 930;
const HomeScreen: React.FC = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <SliderHome />
        <BoxMenuHome />
        <BoxProductReviewTop />
        <BoxCategoryHome />
      </ScrollView>
    </SafeAreaView>
  );
};

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="contain"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="contain"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="contain"
          />
        </View>
        <View style={styles.imgContainer}>
          <Image
            style={styles.imgSlider}
            source={require("../../assets/images/banner_slider.png")}
            resizeMode="contain"
          />
        </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 = () => {
  return (
    <View style={globalStyles.boxCategoryHome}>
      <Text style={globalStyles.textBoxCategoryHome}>Tìm theo danh mục</Text>
      <View style={globalStyles.listCategoryBox}>
        {categories.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>
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  homePage: {
    backgroundColor: "#fff",
  },
  slider: {
    width: winWidth,
    padding: 10,
    borderRadius: 10,
    height: ratio * 430,
  },
  sliderSwipper: {
    borderRadius: 10,
  },
  imgContainer: {
    width: winWidth,
    height: 220,
    borderRadius: 10,
    overflow: "hidden",
  },
  imgSlider: {
    width: winWidth,
    height: "100%",
  },
  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",
  },
});
