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

class Search extends StatefulWidget {
  const Search({Key? key}) : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  String Asset_Description = "";

  TextEditingController _textEditingController = TextEditingController();
  bool _showClearButton = false;

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(() {
      setState(() {
        _showClearButton = _textEditingController.text.length > 0;
      });
    });
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  TextField _getTextField() {
    return TextField(
      controller: _textEditingController,
      decoration: InputDecoration(
        prefixIcon: const Icon(
          FontAwesomeIcons.magnifyingGlass,
          size: 20,
        ),
        hintText: "Search Product",
        hintStyle: const TextStyle(
          color: Colors.black38,
          fontWeight: FontWeight.w400,
        ),
        border: InputBorder.none,
        suffixIcon: _getClearButton(),
      ),
      onChanged: (val) {
        setState(() {
          Asset_Description = val;
        });
      },
    );
  }

  Widget? _getClearButton() {
    if (!_showClearButton) {
      return null;
    }

    return IconButton(
      onPressed: () {
        _textEditingController.clear();
        setState(() {
          Asset_Description = "";
        });
      },
      icon: Icon(
        Icons.cancel,
        color: Colors.grey[500],
        size: 20,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
         backgroundColor: Colors.transparent,
            elevation: 0,
            toolbarHeight: 70,
        title: Card(
          margin: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
            side: const BorderSide(color: kGreyLightColor),
          ),
          child: ClipRRect(
            child: Center(
              child: SizedBox(
                width: 300,
                height: 45,
                child: _getTextField(),
              ),
            ),
          ),
        ),
      ),
      body: StreamBuilder<QuerySnapshot<Object?>>(
        stream: (Asset_Description != "" || Asset_Description != null)
            ? FirebaseFirestore.instance
                .collection("products")
                .where("SearchKeywords", arrayContains: Asset_Description)
                .snapshots()
            : FirebaseFirestore.instance.collection("SearchItems").snapshots(),
        builder: (context, snapshot) {
          return (snapshot.connectionState == ConnectionState.waiting)
              ? const Center(child: CircularProgressIndicator())
              : ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) {
                    DocumentSnapshot<Object?> data = snapshot.data!.docs[index];
                    if(data['Status']=='0'){
                    return 
                    InkWell(
                      onTap: () {
                        Product product = Product(
                          productName: data['Asset_Description'],
                          productImageUrl: data['imageUrl'],
                          productDescription: data['Description'],
                          productStatus: data['Status'],
                          isLiked: false, productCat: '',
                        );
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) =>
                                ProductDetailPage(product: product),
                          ),
                        );

                        // TODO: Navigate to product detail page
                        print('Tapped on ${data['Asset_Description']}');
                      },
                      child: Card(
                        margin: const EdgeInsets.only(
                            left: 5, right: 5, top: 2, bottom: 2),
                        color: Colors.grey[200],
                        child: Container(
                          padding: const EdgeInsets.all(5),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Image.network(
                                data['imageUrl'],
                                width: 55,
                                height: 50,
                                fit: BoxFit.contain,
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              Expanded(
                                child: Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          data['Asset_Description'],
                                          style: const TextStyle(
                                            fontSize: 12,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );}return Card(
                        margin: const EdgeInsets.only(
                            left: 5, right: 5, top: 2, bottom: 2),
                        color: Colors.grey[200],
                        child: Container(
                          padding: const EdgeInsets.all(5),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              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",
                                width: 55,
                                height: 50,
                                fit: BoxFit.contain,
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              Expanded(
                                child: Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          data['Asset_Description'],
                                          style: const TextStyle(
                                            fontSize: 12,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                  },
                );
        },
      ),
    );
  }
}