import 'package:flutter/material.dart';

import 'package:muaawana/views/client_view/home/widgets/products_widget.dart';
import 'package:muaawana/views/client_view/home/widgets/service_widget.dart';
import '../../../../providers/home_provider.dart';
import 'package:responsive_grid_list/responsive_grid_list.dart';

import '../../../../config/lang_enum.dart';
import '../../../../config/provider.dart';
import '../../../../config/size.dart';
import '../../../../config/style.dart';
import '../../../../providers/language_provider.dart';
import '../../../../widgets/custom_app_bar.dart';
import '../../../../widgets/custom_search_textfield.dart';
import '../../../models/services/result.dart';
import '../../../providers/bookmark_provider.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';
import '../../../utils/utils_singleton.dart';

class SearchScreen extends StatefulWidget {
  const SearchScreen({Key? key, required this.name}) : super(key: key);
  final String name;

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;
  final tm = SizeConfig.textMultiplier;

  @override
  void initState() {
    Future.delayed(Duration.zero, () async => await init());

    super.initState();
  }

  init() async {
    await context.read<HomeScreenProvider>().searchHome(widget.name);
    _searchController.value = TextEditingValue(text: widget.name);
  }

  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final langProvider = Provider.of<LanguageProvider>(context);
    final searchProvider = Provider.of<HomeScreenProvider>(context);
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: SingleChildScrollView(
        child: GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const CustomAppBar(
                title: 'Search Result',
              ),
              Padding(
                padding: EdgeInsets.only(top: hm * 5),
                child: Center(
                  child: SizedBox(
                    height: hm * 4,
                    width: wm * 80,
                    child: CustomTextField(
                      isRTL: langProvider.currentLangCode == Language.ar,
                      controller: _searchController,
                      hintText:
                          langProvider.translate('Search service or product'),
                      iconPosition: langProvider.currentLangCode == Language.ar
                          ? CustomTextFieldIconPosition.end
                          : CustomTextFieldIconPosition.start,
                      startIcon: langProvider.currentLangCode == Language.ar
                          ? Container()
                          : GestureDetector(
                              onTap: () {
                                // Navigator.push(
                                //     context,
                                //     MaterialPageRoute(
                                //         builder: (context) => SearchScreen(
                                //           name: _searchController.text,
                                //         )));
                                searchProvider
                                    .searchHome(_searchController.text);
                                FocusScope.of(context).unfocus();
                              },
                              child: const Icon(Icons.search)),
                      endIcon: langProvider.currentLangCode == Language.ar
                          ? GestureDetector(
                              onTap: () {
                                searchProvider
                                    .searchHome(_searchController.text);
                                FocusScope.of(context).unfocus();
                              },
                              child: const Padding(
                                  padding: EdgeInsets.all(10.0),
                                  child: Icon(Icons.search)),
                            )
                          : Container(),
                      // onChanged: (_) {},
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: wm * 10),
                child: Txt(
                  text: langProvider.translate("Services"),
                  style: tS(
                      "lato_extra_bold", 18, FontWeight.bold, AppStyle.primary),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              Padding(
                  padding: EdgeInsets.symmetric(horizontal: wm * 10),
                  child: searchProvider.loader
                      ? const Center(
                          child: SizedBox(
                            height: 50,
                            width: 50,
                            child: CircularProgressIndicator(),
                          ),
                        )
                      : const ServiceSearchedList()),
              const SizedBox(height: 100),
            ],
          ),
        ),
      ),
    );
  }
}

class ServiceSearchedList extends StatelessWidget {
  const ServiceSearchedList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final searchProvider = Provider.of<HomeScreenProvider>(context);

    return searchProvider.searchServicesList.isEmpty
        ? SizedBox(
            height: util.hm * 20,
            width: util.wm * 100,
            child: Center(
              child: Txt(
                text: 'No Service found',
                style:
                    tS('lato_regular', 14, FontWeight.normal, AppStyle.black),
              ),
            ),
          )
        : SizedBox(
            // height: util.hm * 50,
            child: ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: searchProvider.searchServicesList.length,
              itemBuilder: (context, index) {
                List<Service> serviceList = searchProvider.searchServicesList;
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                  child: ServiceWidget(
                    service: serviceList[index],
                    isFromHome: true,
                  ),
                );
              },
            ),
          );
  }
}

class ProductSearchedList extends StatelessWidget {
  const ProductSearchedList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final searchProvider = Provider.of<HomeScreenProvider>(context);

    return searchProvider.searchProductsList.isEmpty
        ? SizedBox(
            height: util.hm * 20,
            width: util.wm * 100,
            child: Center(
              child: Txt(
                text: 'No Product found',
                style:
                    tS('lato_regular', 14, FontWeight.normal, AppStyle.black),
              ),
            ),
          )
        : SizedBox(
            height: util.hm * 50,
            child: ResponsiveGridListBuilder(
              horizontalGridSpacing: 25,
              minItemsPerRow: 1,
              maxItemsPerRow: 2,
              minItemWidth: 50,
              gridItems: _getProductsListWidget(context),
              builder: (BuildContext context, List<Widget> items) {
                return ListView(
                  children: items,
                );
              },
            ),
          );
  }

  List<Widget> _getProductsListWidget(BuildContext context) {
    List<Widget> result = [];
    final productList = context.read<HomeScreenProvider>().searchProductsList;
    for (var product in productList) {
      result.add(SizedBox(
        height: 150,
        child: ProductListTile(
          product: product,
        ),
      ));
    }
    return result;
  }
}