import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:e_commerce/ui/product_details_screen.dart';
import 'package:flutter/material.dart';

class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  var inputText = "";
  bool isLoading = true;
  List<Map<String, dynamic>> data = [];
  List<Map<String, dynamic>> displayedData = [];

  @override
  void initState() {
    super.initState();
    fetchFromFirebase();
  }

  void fetchFromFirebase() async {
    final query = await FirebaseFirestore.instance.collection("products").get();
    data = query.docs.map((e) => e.data()).toList();
    displayedData = data;
    isLoading = false;
    setState(() {});
  }

  void search(String value) {
    displayedData = data.where((element) => element['product-name'].toString().contains(value)).toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              TextFormField(
                onChanged: (val) => search(val),
              ),
              const SizedBox(height: 30),
              if (isLoading) ...[
                const Expanded(child: Center(child: CircularProgressIndicator())),
              ] else ...[
                Expanded(
                  child: SizedBox(
                    child: ListView(
                      children: [
                        ...displayedData.map(
                          (e) => Card(
                            elevation: 5,
                            child: ListTile(
                              title: Text(e['product-name']),
                              leading: SizedBox(
                                width: 50, // You can adjust this width as needed
                                height: 50, // This can be omitted if you don't want a fixed height
                                child: Image.network(e['product-img'], fit: BoxFit.cover),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}