diplomatic-quarter/lib/pages/packages_offers/OfferAndPackageDetailPage.dart

import 'package:diplomaticquarterapp/core/model/packages_offers/responses/PackagesResponseModel.dart';
import 'package:diplomaticquarterapp/core/viewModels/packages_offers/PackagesOffersViewModel.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils_new.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:expandable/expandable.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:html/parser.dart';
import 'package:rating_bar/rating_bar.dart';

class OfferAndPackagesDetail extends StatefulWidget {
  final PackagesResponseModel itemModel;
  final Function(PackagesResponseModel product) onCartClick;

  const OfferAndPackagesDetail({@required this.itemModel, @required this.onCartClick, Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => OfferAndPackagesDetailState();
}

class OfferAndPackagesDetailState extends State<OfferAndPackagesDetail> {
  PackagesViewModel viewModel;

  bool expandFlag = false;
  var controller = new ExpandableController();

  @override
  Widget build(BuildContext context) {
    return BaseView<PackagesViewModel>(
      onModelReady: (model) {
        viewModel = model;
      },
      builder: (_, model, wi) => AppScaffold(
        appBarTitle: TranslationBase.of(context).offerAndPackages,
        isShowAppBar: true,
        isPharmacy: false,
        showPharmacyCart: false,
        showHomeAppBarIcon: false,
        isOfferPackages: true,
        showOfferPackagesCart: true,
        isShowDecPage: false,
        showNewAppBar: true,
        showNewAppBarTitle: true,
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: Colors.white,
                padding: const EdgeInsets.all(21.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(15.0),
                  child: Image.network("https://mdlaboratories.com/offersdiscounts/images/thumbs/0000162_dermatology-testing.jpeg", fit: BoxFit.fill),
                ),
              ),
              Container(
                  padding: const EdgeInsets.only(left: 21.0, right: 21.0, top: 21.0),
                  child: Text(widget.itemModel.name, maxLines: 1, style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.bold, letterSpacing: -1.14))),
              Container(
                  padding: const EdgeInsets.only(left: 21.0, right: 21.0),
                  child: Text(widget.itemModel.shortDescription,
                      maxLines: 2, style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600, letterSpacing: -0.56, color: CustomColors.textColor), overflow: TextOverflow.clip)),
              Row(
                children: [
                  Container(
                    padding: const EdgeInsets.only(left: 21.0, right: 21.0, top: 12.0),
                    child: RatingBar.readOnly(
                      initialRating: 4.5,
                      size: 18.0,
                      filledColor: Color(0XFFD02127),
                      emptyColor: Color(0XFFD02127),
                      isHalfAllowed: true,
                      halfFilledIcon: Icons.star_half,
                      filledIcon: Icons.star,
                      emptyIcon: Icons.star_border,
                    ),
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.only(left: 21.0, right: 21.0, top: 18.0),
                width: double.infinity,
                height: 50.0,
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: widget.itemModel.storeNames.length,
                  separatorBuilder: (context, index) {
                    return mWidth(5.0);
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return contactButton(widget.itemModel.storeNames[index].toString());
                  },
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 18.0),
                child: ExpandableNotifier(
                  initialExpanded: true,
                  child: Container(
                    color: Colors.white,
                    child: Column(
                      children: <Widget>[
                        ScrollOnExpand(
                          scrollOnExpand: true,
                          scrollOnCollapse: false,
                          child: ExpandablePanel(
                            hasIcon: false,
                            theme: const ExpandableThemeData(
                              headerAlignment: ExpandablePanelHeaderAlignment.center,
                              tapBodyToCollapse: true,
                            ),
                            header: Padding(
                              padding: const EdgeInsets.only(top: 20, bottom: 20, left: 21, right: 21),
                              child: InkWell(
                                onTap: () {
                                  setState(() {
                                    expandFlag = !expandFlag;
                                    controller.expanded = expandFlag;
                                  });
                                },
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                      child: Column(
                                        mainAxisSize: MainAxisSize.min,
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            TranslationBase.of(context).description,
                                            maxLines: 1,
                                            style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.bold, letterSpacing: -1.14),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Icon(
                                      expandFlag ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                                      color: Color(0xff2E303A),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            builder: (_, collapsed, expanded) {
                              return Expandable(
                                controller: controller,
                                collapsed: collapsed,
                                expanded: Container(
                                    padding: const EdgeInsets.only(left: 21.0, right: 21.0, bottom: 21.0),
                                    child: Text(parseHtmlString(widget.itemModel.fullDescription),
                                        style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600, letterSpacing: -0.56, color: CustomColors.textColor), overflow: TextOverflow.clip)),
                                theme: const ExpandableThemeData(crossFadePoint: 0),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomSheet: Container(
          padding: const EdgeInsets.only(top: 16, bottom: 16, left: 21, right: 21),
          color: Colors.white,
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    if(widget.itemModel.hasDiscountsApplied) Container(
                        margin: const EdgeInsets.only(top: 0.0),
                        child: Text(widget.itemModel.oldPrice.toString() + " " + TranslationBase.of(context).sar,
                            style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w600, letterSpacing: -0.6, decoration: TextDecoration.lineThrough, color: CustomColors.grey2))),
                    Container(
                        margin: const EdgeInsets.only(top: 0.0),
                        child: Text(widget.itemModel.price.toString().trim() + " " + TranslationBase.of(context).sar,
                            style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.bold, letterSpacing: -0.56))),
                  ],
                ),
              ),
              SizedBox(width: 8),
              Expanded(
                child: SizedBox(
                  height: 43,
                  width: double.infinity,
                  child: FlatButton(
                    onPressed: () {
                      // onCartClick();
                      widget.onCartClick(widget.itemModel);
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: SvgPicture.asset("assets/images/new/add-to-cart.svg", color: Colors.white),
                        ),
                        Container(
                          child: Text(
                            TranslationBase.of(context).addToCart,
                            textAlign: TextAlign.center,
                            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white, letterSpacing: -0.48),
                          ),
                        ),
                      ],
                    ),
                    color: const Color(0xffD02127),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(6),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  String parseHtmlString(String htmlString) {
    var document = parse(htmlString);
    String parsedString = parse(document.body.text).documentElement.text;
    return parsedString;
  }

  Widget contactButton(String title) {
    return SizedBox(
      height: 32,
      width: 80.0,
      child: FlatButton(
        onPressed: () {},
        color: Colors.white,
        shape: StadiumBorder(side: BorderSide(color: CustomColors.devider, width: 1)),
        child: Text(
          title,
          style: TextStyle(fontSize: 10, letterSpacing: -0.4, color: CustomColors.textColor),
          maxLines: 1,
        ),
      ),
    );
  }
}