import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacy_categorise_view_model.dart';
import 'package:diplomaticquarterapp/pages/pharmacies/product-brands.dart';
import 'package:diplomaticquarterapp/pages/pharmacies/product_detail.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/input/text_field.dart';
import 'package:diplomaticquarterapp/widgets/others/StarRating.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_pharmacy_widget.dart';
import 'package:diplomaticquarterapp/widgets/others/network_base_view.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';

import 'base/base_view.dart';

class SearchProductsPage extends StatefulWidget {
  @override
  _SearchProductsPageState createState() => _SearchProductsPageState();
}

class _SearchProductsPageState extends State<SearchProductsPage> {
  final textController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  String msg = '';

  @override
  Widget build(BuildContext context) {
    return BaseView<PharmacyCategoriseViewModel>(
      onModelReady: (model) => model.clearSearchList(),
      builder: (BuildContext context, PharmacyCategoriseViewModel model,
              Widget child) =>
          PharmacyAppScaffold(
        appBarTitle: TranslationBase.of(context).search,
        isBottomBar: false,
        isShowAppBar: true,
        backgroundColor: Colors.white,
        isShowDecPage: false,
        //baseViewModel: model,
        body: SingleChildScrollView(
          child: Container(
            height: SizeConfig.screenHeight,
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width * 0.70,
                        child: Form(
                          key: _formKey,
                          child: TextFields(
                            autoFocus: true,
                            hintText: TranslationBase.of(context).search,
                            fontSize: 14.5,
                            prefixIcon: Icon(Icons.search),
                            inputAction: TextInputAction.search,
                            onSaved: (value) {
                              //searchMedicine(model, context);
                            },
                            onSubmit: (value) {
                              searchMedicine(model, context);
//                              msg = 'No Result Found';
                              msg = TranslationBase.of(context).noResultFound;
                            },
                            controller: textController,
                            validator: (value) {
                              if (value.isEmpty) {
//                                return 'please Enter Product Name';
                              return TranslationBase.of(context).pleaseEnterProductName;
                              }
                              return null;
                            },
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      InkWell(
                        child: Texts(
                          TranslationBase.of(context).cancel,
                          fontSize: 17.0,
                          fontWeight: FontWeight.w500,
                        ),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),

                      // child: Container(
                      //   child: Button(
                      //       backgroundColor: Colors.green,
                      //       loading: model.state == ViewState.BusyLocal,
                      //       label: 'Search',
                      //       onTap: () {
                      //         searchMedicine(model, context);
                      //       }),
                      //   width: MediaQuery.of(context).size.width * 0.09,
                      // ),
                    ],
                  ),
                ),
                Center(
                  child: NetworkBaseView(
                    baseViewModel: model,
                    child: model.searchList.isNotEmpty
                        ? InkWell(
                            child: Container(
                              height: MediaQuery.of(context).size.height * 0.80,
                              child: GridView.builder(
                                //physics: NeverScrollableScrollPhysics(),
                                gridDelegate:
                                    SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 2,
                                  crossAxisSpacing: 0.5,
                                  mainAxisSpacing: 2.0,
                                  childAspectRatio: 1.0,
                                ),
                                itemCount: model.searchList.length,
                                itemBuilder: (BuildContext context, int index) {
                                  return InkWell(
                                    child: Card(
                                      color: model.searchList[index]
                                                  .discountName !=
                                              null
                                          ? Color(0xffFFFF00)
                                          : Colors.white,
                                      elevation: 0,
                                      shape: Border(
                                        right: BorderSide(
                                          color: Colors.grey.shade300,
                                          width: 1,
                                        ),
                                        left: BorderSide(
                                          color: Colors.grey.shade300,
                                          width: 1,
                                        ),
                                        bottom: BorderSide(
                                          color: Colors.grey.shade300,
                                          width: 1,
                                        ),
                                        top: BorderSide(
                                          color: Colors.grey.shade300,
                                          width: 1,
                                        ),
                                      ),
                                      margin: EdgeInsets.symmetric(
                                        horizontal: 8,
                                        vertical: 4,
                                      ),
                                      child: Container(
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(110.0),
                                          ),
                                          color: Colors.white,
                                        ),
                                        padding:
                                            EdgeInsets.symmetric(horizontal: 0),
                                        width:
                                            MediaQuery.of(context).size.width /
                                                3,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Stack(
                                              children: [
                                                Container(
                                                  margin: EdgeInsets.fromLTRB(
                                                      0, 16, 0, 0),
                                                  alignment: Alignment.center,
                                                  child: Image.network(
                                                    model.searchList[index]
                                                            .images.isNotEmpty
                                                        ? model
                                                            .searchList[index]
                                                            .images[0]
                                                            .thumb
                                                        : 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/No_image_3x4.svg/1200px-No_image_3x4.svg.png',
                                                    fit: BoxFit.cover,
                                                    height: 80,
                                                  ),
                                                ),
                                                Container(
                                                  width: model.searchList[index]
                                                              .rxMessage !=
                                                          null
                                                      ? MediaQuery.of(context)
                                                              .size
                                                              .width /
                                                          5
                                                      : 0,
                                                  padding: EdgeInsets.all(4),
                                                  decoration: BoxDecoration(
                                                    color: Color(0xffb23838),
                                                    borderRadius:
                                                        BorderRadius.only(
                                                            topLeft:
                                                                Radius.circular(
                                                                    6)),
                                                  ),
                                                  child: Texts(
                                                    model.searchList[index]
                                                                .rxMessage !=
                                                            null
                                                        ? model
                                                            .searchList[index]
                                                            .rxMessage
                                                        : "",
                                                    color: Colors.white,
                                                    regular: true,
                                                    fontSize: 10,
                                                    fontWeight: FontWeight.w400,
                                                  ),
                                                ),
                                              ],
                                            ),
                                            Container(
                                              margin: EdgeInsets.symmetric(
                                                horizontal: 6,
                                                vertical: 0,
                                              ),
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Texts(
                                                    model
                                                        .searchList[index].name,
                                                    regular: true,
                                                    fontSize: 12,
                                                    fontWeight: FontWeight.w400,
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            top: 4, bottom: 4),
                                                    child: Texts(
                                                      "SAR ${model.searchList[index].price}",
                                                      bold: true,
                                                      fontSize: 14,
                                                    ),
                                                  ),
                                                  Row(
                                                    children: [
                                                      StarRating(
                                                          totalAverage: model
                                                                      .searchList[
                                                                          index]
                                                                      .approvedRatingSum >
                                                                  0
                                                              ? (model
                                                                          .searchList[
                                                                              index]
                                                                          .approvedRatingSum
                                                                          .toDouble() /
                                                                      model
                                                                          .searchList[
                                                                              index]
                                                                          .approvedRatingSum
                                                                          .toDouble())
                                                                  .toDouble()
                                                              : 0,
                                                          forceStars: true),
                                                      Texts(
                                                        "(${model.searchList[index].approvedTotalReviews})",
                                                        regular: true,
                                                        fontSize: 10,
                                                        fontWeight:
                                                            FontWeight.w400,
                                                      )
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    onTap: () => {
                                      Navigator.push(
                                          context,
                                          FadePage(
                                            page: ProductDetailPage(
                                                model.searchList[index]),
                                          )),
                                    },
                                  );
                                },
                              ),
                            ),
                          )
                        : Texts(msg),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  searchMedicine(PharmacyCategoriseViewModel model, BuildContext context) {
    Utils.hideKeyboard(context);
    if (_formKey.currentState.validate())
      model.searchProducts(productName: textController.text);
  }
}
