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/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: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: '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.79,
                        child: Form(
                          key: _formKey,
                          child: TextFields(
                            autoFocus: true,
                            hintText: 'Search',
                            fontSize: 19.0,
                            prefixIcon: Icon(Icons.search),
                            inputAction: TextInputAction.search,
                            onSaved: (value) {
                              //searchMedicine(model, context);
                            },
                            onSubmit: (value) {
                              searchMedicine(model, context);
                              msg = 'No Result Found';
                            },
                            controller: textController,
                            validator: (value) {
                              if (value.isEmpty) {
                                return 'please Enter Product Name';
                              }
                              return null;
                            },
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      InkWell(
                        child: Texts(
                          '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
                        ? 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 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,
                                                  )
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                );
                              },
                            ),
                          )
                        : Texts(msg),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

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