import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/Project/HomePage/Model/data.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../utils/colors.dart';
import 'product_detail.dart';

class ProductDisplayWidget extends StatefulWidget {
  const ProductDisplayWidget({super.key});

  @override
  State<ProductDisplayWidget> createState() => _ProductDisplayWidgetState();
}

class _ProductDisplayWidgetState extends State<ProductDisplayWidget> {
  late Stream<QuerySnapshot> _productsStream;
  late Stream<QuerySnapshot> _productsStream2;

  @override
  void initState() {
    super.initState();
    _productsStream = FirebaseFirestore.instance
        .collection('products')
        .orderBy('Asset_Description')
        .snapshots();
  }
  void initState2() {
    super.initState();
    _productsStream2 = FirebaseFirestore.instance
        .collection('products')
        .orderBy('Status')
        .snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _productsStream,
      builder: (context, snapshot) {

        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (!snapshot.hasData) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }

        final products = snapshot.data!.docs
            .map(
              (doc) => Product(
                productName: doc['Asset_Description'] as String,
                productImageUrl: doc['imageUrl'] as String,
                isLiked: false,
                productDescription: doc['Description'] as String,
                productStatus: doc['Status'] as String, productCat: '',
              ),
            )
            .toList();
            
        return MasonryGridView.count(
          padding: const EdgeInsets.symmetric(vertical: 10),
          crossAxisSpacing: 15,
          crossAxisCount: 2,
          itemCount: products.length,
          mainAxisSpacing: 15,
          itemBuilder: (context, index) {
            return singleItemWidget(
              products[index],
              index == products.length - 1 ? true : false,
            );
          },
        );
      },
    );
  }

 Widget singleItemWidget(Product product, bool lastItem) {
  if (product.productStatus == '0') {
    return InkWell(
      onTap: () {
        // TODO: Handle tap on the item
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: ((context) => ProductDetailPage(
              product: product,
            )),
          ),
        );
      },
      borderRadius: BorderRadius.circular(28),
      child: Column(
        children: [
          Stack(
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(28),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      spreadRadius: 1,
                      blurRadius: 5,
                      offset: const Offset(1, 1),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AspectRatio(
                      aspectRatio: 1,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(28),
                        child: Image.network(
                          product.productImageUrl,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 10, left: 8, right: 3),
                      child: Text(
                        product.productName,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ),
              
            ],
          ),
          SizedBox(
            height: lastItem == true
                ? MediaQuery.of(context).size.height * 0.50
                : 0,
          )
        ],
      ),
    );
  } return Column(
        children: [
          Stack(
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(28),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      spreadRadius: 1,
                      blurRadius: 5,
                      offset: const Offset(1, 1),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AspectRatio(
                      aspectRatio: 1,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(28),
                        child: Image.network(
                          "https://firebasestorage.googleapis.com/v0/b/project-tongz-1.appspot.com/o/admin_images%2Fout%20of%20stock.jpg?alt=media&token=616cbed0-3ae9-48fd-affc-3188c9db5199",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 10, left: 8, right: 3),
                      child: Text(
                        product.productName,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ),
              
            ],
          ),
          SizedBox(
            height: lastItem == true
                ? MediaQuery.of(context).size.height * 0.50
                : 0,
          )
        ],
      );
    
}


}