import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { globalStyles } from "styles/globalStyles";
import Footer from "@components/footer/Footer";

const screenWidth = Dimensions.get("window").width;
const numColumns = 2;

const categories = Array.from({ length: 12 }, (_, index) => ({
  id: index + 1,
  title: "Máy chủ",
  image: require("../../../assets/images/category-avatar.png"),
  link: "productlistmain",
}));

const ProductListBig = () => {
  const navigation = useNavigation<NavigationProp<any>>();

  const renderItem = ({ item }: { item: (typeof categories)[0] }) => (
    <TouchableOpacity
      style={styles.card}
      onPress={() => navigation.navigate(item.link as never)}
    >
      <Image source={item.image} style={styles.image} resizeMode="contain" />
      <Text style={styles.title} numberOfLines={1}>
        {item.title}
      </Text>
    </TouchableOpacity>
  );

  return (
    <AppLayout activeTab="productlist">
      <ScrollView>
        <View style={styles.container}>
          {/* Breadcrumb */}
          <View style={globalStyles.breadcrumb}>
            <TouchableOpacity
              style={globalStyles.breadcrumbItem}
              onPress={() => navigation.navigate("Home" as never)}
            >
              <Ionicons name="home-outline" size={20} color="#637381" />
            </TouchableOpacity>
            <Ionicons name="chevron-forward-outline" size={14} color="#999" />
            <Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
              Màn hình máy tính
            </Text>
          </View>
          <FlatList
            data={categories}
            renderItem={renderItem}
            keyExtractor={(item) => item.id.toString()}
            numColumns={numColumns}
            contentContainerStyle={styles.grid}
            columnWrapperStyle={styles.columnWrapper}
            showsVerticalScrollIndicator={false}
          />
        </View>
      </ScrollView>
    </AppLayout>
  );
};

export default ProductListBig;

const itemWidth = screenWidth / numColumns - 17;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
  },
  grid: {
    paddingVertical: 10,
  },
  columnWrapper: {
    justifyContent: "space-between",
    marginBottom: 10,
  },
  card: {
    width: itemWidth,
    borderWidth: 1,
    borderColor: "#c0c0c0",
    borderRadius: 8,
    padding: 10,
    alignItems: "center",
    backgroundColor: "#fff",
  },
  image: {
    width: itemWidth,
    height: 100,
    marginBottom: 10,
  },
  title: {
    textAlign: "center",
    fontSize: 16,
    fontWeight: "600",
  },
});