import 'package:diplomaticquarterapp/core/viewModels/offers_Categorise_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.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 'package:provider/provider.dart';
import 'package:rating_bar/rating_bar.dart';

import 'base/base_view.dart';

class OffersCategorisePage extends StatefulWidget {
  @override
  _OffersCategorisePageState createState() => _OffersCategorisePageState();
}

class _OffersCategorisePageState extends State<OffersCategorisePage> {
  String categoriseName = "Personal Care";
  bool styleOne = true;
  bool styleTwo = false;
  Icon styleIcon = Icon(
    Icons.widgets_sharp,
    color: Colors.blue,
    size: 29.0,
  );

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    ProjectViewModel projectProvider = Provider.of(context);
    return BaseView<OffersCategoriseViewModel>(
        onModelReady: (model) => model.getOffersCategorise(),
        builder: (BuildContext context, OffersCategoriseViewModel model,
                Widget child) =>
            PharmacyAppScaffold(
                appBarTitle: TranslationBase.of(context).offers,
                isShowAppBar: true,
                backgroundColor: Colors.white,
                isShowDecPage: false,
                baseViewModel: model,
                body: model.categorise.length != 0
                    ? Container(
                        //height: MediaQuery.of(context).size.height * 0.57,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: EdgeInsets.all(10.0),
                              child: Container(
                                child: Texts(
                                  'Categories',
                                  fontWeight: FontWeight.w800,
                                ),
                              ),
                            ),
                            Divider(
                              thickness: 1.0,
                              color: Colors.grey.shade400,
                            ),
                            //Expanded widget heree if nassery
                            Container(
                              height: MediaQuery.of(context).size.height * 0.20,
                              child: ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: model.categorise.length,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return Padding(
                                      padding: EdgeInsets.all(8.0),
                                      child: Row(
                                        children: [
                                          InkWell(
                                              child: Column(
                                                children: [
                                                  Container(
                                                    height: 60.0,
                                                    width: 65.0,
                                                    decoration: BoxDecoration(
                                                      shape: BoxShape.circle,
                                                      color: Colors
                                                          .orange.shade200
                                                          .withOpacity(0.45),
                                                    ),
                                                    child: Icon(
                                                      Icons.apps_sharp,
                                                      size: 32.0,
                                                    ),
                                                  ),
                                                  Container(
                                                    width:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .width *
                                                            0.2,
                                                    height:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .height *
                                                            0.09,
                                                    child: Center(
                                                      child: Texts(projectViewModel.isArabic ? model.categorise[index].namen : model.categorise[index].name,
//                                                        model.categorise[index].name,
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        fontSize: 13.8,
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              onTap: () {
                                                model.getOffersProducts(
                                                    i: model
                                                        .categorise[index].id);
                                                String ids =
                                                    model.categorise[index].id;

                                                categoriseName = projectViewModel.isArabic ? model.categorise[index].namen : model.categorise[index].name;
                                                    //model.categorise[index].name;
                                              }),
                                        ],
                                      ),
                                    );
                                  }),
                            ),
                            Divider(
                              thickness: 1.0,
                              color: Colors.grey.shade400,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Padding(
                                  padding: EdgeInsets.all(8.0),
                                  child: Texts(
                                    categoriseName,
                                    fontWeight: FontWeight.w800,
                                  ),
                                ),
                                Row(
                                  children: [
                                    Container(
                                      height: 44.0,
                                      child: VerticalDivider(
                                        color: Colors.black45,
                                        thickness: 0.7,
                                        //width: 0.3,
                                        // indent: 0.0,
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.all(8.0),
                                      child: InkWell(
                                        child: styleIcon,
                                        onTap: () {
                                          setState(() {
                                            if (styleOne == true) {
                                              styleOne = false;
                                              styleTwo = true;
                                              styleIcon = Icon(
                                                Icons.auto_awesome_mosaic,
                                                color: Colors.blue,
                                                size: 29.0,
                                              );
                                            } else {
                                              styleOne = true;
                                              styleTwo = false;
                                              styleIcon = Icon(
                                                Icons.widgets_sharp,
                                                color: Colors.blue,
                                                size: 29.0,
                                              );
                                            }
                                          });
                                        },
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            Divider(
                              thickness: 1.0,
                              color: Colors.grey.shade400,
                            ),
                            styleOne == true
                                ? Expanded(
                                    child: Container(
                                      height:
                                          MediaQuery.of(context).size.height *
                                              0.50,
                                      child: GridView.builder(
                                        gridDelegate:
                                            SliverGridDelegateWithFixedCrossAxisCount(
                                          crossAxisCount: 2,
                                          crossAxisSpacing: 0.5,
                                          mainAxisSpacing: 2.0,
                                          childAspectRatio: 0.85,
                                        ),
                                        itemCount: model.products.length,
                                        itemBuilder:
                                            (BuildContext context, int index) {
                                          return NetworkBaseView(
                                              baseViewModel: model,
                                              child: Card(
                                                color: model.products[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(
                                                  height: 250.0,
                                                  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: [
                                                          if (model
                                                                  .products[
                                                                      index]
                                                                  .discountName !=
                                                              null)
                                                            RotatedBox(
                                                              quarterTurns: 4,
                                                              child: Container(
                                                                decoration:
                                                                    BoxDecoration(),
                                                                child: Padding(
                                                                  padding:
                                                                      EdgeInsets
                                                                          .only(
                                                                    right: 5.0,
                                                                    top: 20.0,
                                                                    bottom: 5.0,
                                                                  ),
                                                                  child: Texts(
                                                                    TranslationBase.of(context).offers
                                                                        .toUpperCase(),
                                                                    color: Colors
                                                                        .red,
                                                                    fontSize:
                                                                        13.0,
                                                                    fontWeight:
                                                                        FontWeight
                                                                            .w900,
                                                                  ),
                                                                ),
                                                                transform: new Matrix4
                                                                        .rotationZ(
                                                                    5.837200),
                                                              ),
                                                            ),
                                                          Container(
                                                            margin: EdgeInsets
                                                                .fromLTRB(0, 16,
                                                                    0, 0),
                                                            alignment: Alignment
                                                                .center,
                                                            child:
                                                                Image.network(
                                                              model
                                                                      .products[
                                                                          index]
                                                                      .images
                                                                      .isNotEmpty
                                                                  ? model
                                                                      .products[
                                                                          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
                                                                        .products[
                                                                            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:  model.products[index].rxMessage != null
                                                                ? Texts(
                                                              projectProvider.isArabic
                                                                  ? model.products[index].rxMessagen
                                                                  : model.products[index].rxMessage,
                                                              color: Colors.white,
                                                              regular: true,
                                                              fontSize: 10,
                                                              fontWeight: FontWeight.w400,
                                                            ): Texts("")
//                                                            Texts(
//                                                              model.products[index].rxMessage != null ?
//                                                              model.products[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: [
                                                            if (model
                                                                    .products[
                                                                        index]
                                                                    .discountName !=
                                                                null)
                                                              Container(
                                                                width: double
                                                                    .infinity,
                                                                height: 22.0,
                                                                decoration:
                                                                    BoxDecoration(
                                                                  color: Color(
                                                                      0xff5AB145),
                                                                ),
                                                                child: Center(
                                                                  child: Texts(
                                                                    model
                                                                        .products[
                                                                            index]
                                                                        .discountName,
                                                                    regular:
                                                                        true,
                                                                    color: Colors
                                                                        .white,
                                                                    fontSize:
                                                                        12.0,
                                                                    fontWeight:
                                                                        FontWeight
                                                                            .w700,
                                                                  ),
                                                                ),
                                                              ),
                                                            Texts(  projectViewModel.isArabic ? model.products[index].namen : model.products[index].name,
                                                             // model.products[index].name,
                                                              regular: true,
                                                              fontSize: 12.58,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w600,
                                                            ),
                                                            Padding(
                                                              padding:
                                                                  const EdgeInsets
                                                                          .only(
                                                                      top: 4,
                                                                      bottom:
                                                                          4),
                                                              child: Texts(
                                                                "SAR ${model.products[index].price}",
                                                                bold: true,
                                                                fontSize: 14,
                                                              ),
                                                            ),
                                                            Row(
                                                              children: [
//                                                                StarRating(
//                                                                    totalAverage: model.products[index].approvedRatingSum >
//                                                                            0
//                                                                        ? (model.products[index].approvedRatingSum.toDouble() / model.products[index].approvedRatingSum.toDouble())
//                                                                            .toDouble()
//                                                                        : 0,
//                                                                    forceStars:
//                                                                        true),
                                                                RatingBar.readOnly(
                                                                  initialRating: model.products[index].approvedRatingSum.toDouble(),
                                                                  size: 15.0,
                                                                  filledColor: Colors.yellow[700],
                                                                  emptyColor: Colors.grey[500],
                                                                  isHalfAllowed: true,
                                                                  halfFilledIcon: Icons.star_half,
                                                                  filledIcon: Icons.star,
                                                                  emptyIcon: Icons.star,
                                                                ),
                                                                Texts(
                                                                  "(${model.products[index].approvedTotalReviews})",
                                                                  regular: true,
                                                                  fontSize: 10,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w400,
                                                                )
                                                              ],
                                                            ),
                                                          ],
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                ),
                                              ));
                                        },
                                      ),
                                    ),
                                  )
                                : Expanded(
                                    child: Container(
                                      child: ListView.builder(
                                          itemCount: model.products.length,
                                          itemBuilder: (BuildContext context,
                                              int index) {
                                            return Card(
                                              // color:
                                              //     model.products[index].discountName !=
                                              //             null
                                              //         ? Color(0xffFFFF00)
                                              //         : Colors.white,
                                              child: Row(
                                                children: [
                                                  Stack(
                                                    children: [
                                                      Column(
                                                        children: [
                                                          if (model
                                                                  .products[
                                                                      index]
                                                                  .discountName !=
                                                              null)
                                                            Container(
                                                              decoration:
                                                                  BoxDecoration(),
                                                              child: Padding(
                                                                padding:
                                                                    EdgeInsets
                                                                        .only(
                                                                  left: 9.0,
                                                                  top: 8.0,
                                                                  right: 10.0,
                                                                ),
                                                                child:
                                                                    Container(
                                                                  color: Colors
                                                                      .yellow,
                                                                  height: 25.0,
                                                                  width: 70.0,
                                                                  child: Center(
                                                                    child:
                                                                        Texts(
                                                                          TranslationBase.of(context).offers
                                                                          .toUpperCase(),
                                                                      color: Colors
                                                                          .red,
                                                                      fontSize:
                                                                          13.0,
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w900,
                                                                    ),
                                                                  ),
                                                                ),
                                                              ),
                                                              transform: new Matrix4
                                                                      .rotationZ(
                                                                  6.15099),
                                                            ),
                                                          Container(
                                                            margin: EdgeInsets
                                                                .fromLTRB(
                                                                    0, 0, 0, 0),
                                                            alignment: Alignment
                                                                .center,
                                                            child:
                                                                Image.network(
                                                              model
                                                                      .products[
                                                                          index]
                                                                      .images
                                                                      .isNotEmpty
                                                                  ? model
                                                                      .products[
                                                                          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,
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                      Column(
                                                        children: [
                                                          Container(
                                                            width: model
                                                                        .products[
                                                                            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:  model.products[index].rxMessage != null
                                                                ? Texts(
                                                              projectProvider.isArabic
                                                                  ? model.products[index].rxMessagen
                                                                  : model.products[index].rxMessage,
                                                              color: Colors.white,
                                                              regular: true,
                                                              fontSize: 10,
                                                              fontWeight: FontWeight.w400,
                                                            ): Texts("")
//                                                            Texts(
//                                                              model.products[index].rxMessage != null
//                                                                  ? model.products[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: [
                                                        if (model
                                                                .products[index]
                                                                .discountName !=
                                                            null)
                                                          Container(
                                                            width: 250.0,
                                                            height: 22.5,
                                                            decoration:
                                                                BoxDecoration(
                                                              color: Color(
                                                                  0xff5AB145),
                                                            ),
                                                            child: Padding(
                                                              padding: EdgeInsets
                                                                  .symmetric(
                                                                horizontal: 5.5,
                                                              ),
                                                              child: Texts(
                                                                model
                                                                    .products[
                                                                        index]
                                                                    .discountName,
                                                                regular: true,
                                                                color: Colors
                                                                    .white,
                                                                fontSize: 12.0,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w700,
                                                              ),
                                                            ),
                                                          ),
                                                        SizedBox(
                                                          height: 4.0,
                                                        ),
                                                        Texts(  projectViewModel.isArabic ? model.products[index].namen : model.products[index].name,
                                                         // model.products[index].name,
                                                          regular: true,
                                                          fontSize: 14.0,
                                                          fontWeight:
                                                              FontWeight.w600,
                                                        ),
                                                        SizedBox(
                                                          height: 8.0,
                                                        ),
                                                        Padding(
                                                          padding:
                                                              const EdgeInsets
                                                                      .only(
                                                                  top: 4,
                                                                  bottom: 4),
                                                          child: Texts(
                                                            "SAR ${model.products[index].price}",
                                                            bold: true,
                                                            fontSize: 14,
                                                          ),
                                                        ),
                                                        Row(
                                                          children: [
//                                                            StarRating(
//                                                                totalAverage: model
//                                                                            .products[
//                                                                                index]
//                                                                            .approvedRatingSum >
//                                                                        0
//                                                                    ? (model.products[index].approvedRatingSum.toDouble() /
//                                                                            model.products[index].approvedRatingSum
//                                                                                .toDouble())
//                                                                        .toDouble()
//                                                                    : 0,
//                                                                forceStars:
//                                                                    true),
                                                            RatingBar.readOnly(
                                                              initialRating: model.products[index].approvedRatingSum.toDouble(),
                                                              size: 15.0,
                                                              filledColor: Colors.yellow[700],
                                                              emptyColor: Colors.grey[500],
                                                              isHalfAllowed: true,
                                                              halfFilledIcon: Icons.star_half,
                                                              filledIcon: Icons.star,
                                                              emptyIcon: Icons.star,
                                                            ),
                                                            Texts(
                                                              "(${model.products[index].approvedTotalReviews})",
                                                              regular: true,
                                                              fontSize: 10,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w500,
                                                            )
                                                          ],
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            );
                                          }),
                                    ),
                                  )
                          ],
                        ),
                      )
                    : Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Image.asset(
                          'assets/images/new-design/empty_box.png',
                          width: 100,
                          height: 100,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(TranslationBase.of(context).noOffersAvailable,
//                      'There is no data',
                          style: TextStyle(fontSize: 30),
                        ),
                      )
                    ],
                  ),
//                        child: Texts(
//                        "SORRY , there's no listed offers now :(",
//                        color: Colors.green,
//                      )
                )));
  }
}
