import React, { useState } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";
import { globalStyles } from "styles/globalStyles";
import { Ionicons } from "@expo/vector-icons";
import { Picker } from "@react-native-picker/picker";
import ProductItem from "@components/product/ItemProduct";
import { products } from "../../data/product";
import FilterDropdown from "@components/product/FilterDropdown";
import Footer from "@components/footer/Footer";

const ProductList = () => {
  const navigation = useNavigation<NavigationProp<any>>();
  const [selectedAddress, setSelectedAddress] = useState("");
  const [selectedBrand, setSelectedBrand] = useState("");

  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>

          <Text style={styles.nameCategory}>
            Máy tính để bàn, máy tính xách tay và linh phụ kiện
          </Text>

          <View style={styles.boxFilter}>
            <Text>Bộ lọc</Text>
            <View style={styles.listFilter}>
              <FilterDropdown
                placeholder="Địa chỉ"
                options={["Hà Nội", "TP.HCM", "Đà Nẵng"]}
                selected={selectedAddress}
                onSelect={setSelectedAddress}
              />
              <FilterDropdown
                placeholder="Thương hiệu"
                options={["Dell", "HP", "Lenovo"]}
                selected={selectedBrand}
                onSelect={setSelectedBrand}
              />
            </View>
          </View>

          <View style={styles.listProduct}>
            {products.map((item) => (
              <ProductItem key={item.id} product={item} />
            ))}
          </View>
        </View>
      </ScrollView>
    </AppLayout>
  );
};

export default ProductList;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
    marginBottom: 60,
  },
  nameCategory: {
    fontSize: 16,
    fontWeight: 700,
  },
  listFilter: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginRight: -5,
  },
  boxFilter: {
    marginTop: 10,
    paddingLeft: 10,
    paddingTop: 10,
    backgroundColor: "#f5f5f5",
  },
  listProduct: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingTop: 10,
    gap: 10,
    paddingBottom: 10,
  },
});
