diplomatic-quarter/lib/widgets/offers_packages/offers_packages.dart

import 'dart:developer';

import 'package:carousel_pro/carousel_pro.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:diplomaticquarterapp/core/model/packages_offers/requests/OffersCategoriesRequestModel.dart';
import 'package:diplomaticquarterapp/core/model/packages_offers/requests/OffersProductsRequestModel.dart';
import 'package:diplomaticquarterapp/core/service/packages_offers/PackagesOffersServices.dart';
import 'package:diplomaticquarterapp/core/viewModels/packages_offers/PackagesOffersViewModel.dart';
import 'package:diplomaticquarterapp/locator.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/loadings/ShimmerLoading.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class OffersAndPackagesWidget extends StatefulWidget {
  final List<OfferPackagesItemModel> models;
  OffersAndPackagesWidget(this.models);

  @override
  _OffersAndPackagesWidgetState createState() => _OffersAndPackagesWidgetState();
}

// - - - - - - - - - - - - - -
// Carousel Widget
// - - - - - - - - - - - - - -
class _OffersAndPackagesWidgetState extends State<OffersAndPackagesWidget> {
  final double HEIGHT = 140; //200;
  final int AUTO_SLIDE_INTERVAL = 3;
  final int ANIMATION_DURATION = 1000;

  var service = locator<OffersAndPackagesServices>();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    var option = CarouselOptions(
      height: HEIGHT,
      aspectRatio: 16 / 9,
      viewportFraction: 1,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: AUTO_SLIDE_INTERVAL),
      autoPlayAnimationDuration: Duration(milliseconds: ANIMATION_DURATION),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      scrollDirection: Axis.horizontal,
    );

    // return Container(
    //     height: HEIGHT,
    //     child: CarouselSlider.builder(
    //         itemCount: widget.models.length,
    //         itemBuilder: (BuildContext context, int itemIndex) {
    //           var item = widget.models[itemIndex];
    //           return OfferPackagesItemWidget(model: item);
    //         },
    //         options: option));

    var header = Padding(
      padding: const EdgeInsets.only(right: 15, left: 15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Texts(
            TranslationBase.of(context).offerAndPackages,
            color: Colors.red,
            fontSize: 15,
            bold: true,
          ),
          Texts(
            TranslationBase.of(context).viewAll,
            color: Colors.red,
            fontSize: 12,
          )
        ],
      ),
    );

    var headerSpaceVisible = true;
    var headerSpace = Visibility(
      child: header,
      visible: headerSpaceVisible,
    );

    return Column(
      children: [
        headerSpace,
        ShimmerLoadingWidget(
          onPreProccess: () {
            return service.getAllCategories(OffersCategoriesRequestModel(limit: 100, page: 1, sinceId: 0));
          },
          loadingWidget: () {
            return Texts(
              "Loading...",
              fontSize: 20,
              color: Colors.green,
              marginBottom: 10,
              marginTop: 10,
            );
          },
          realWidget: () {
            if (widget.models.isNotEmpty) {
              return Container(
                child: CarouselSlider.builder(
                    itemCount: widget.models.length,
                    itemBuilder: (BuildContext context, int itemIndex) {
                      var item = widget.models[itemIndex];
                      return OfferPackagesItemWidget(model: item);
                    },
                    options: option),
              );
            } else {
              return Container();
            }
          },
          onFinish: () {},
        )

        //
      ],
    );
  }
}

// - - - - - - - - - - - - - -
// Carousel Item Widget
// - - - - - - - - - - - - - -
class OfferPackagesItemWidget extends StatefulWidget {
  final OfferPackagesItemModel model;
  OfferPackagesItemWidget({@required this.model});

  @override
  State<OfferPackagesItemWidget> createState() {
    return _OfferPackagesItemWidgetState();
  }
}

class _OfferPackagesItemWidgetState extends State<OfferPackagesItemWidget> {
  @override
  Widget build(BuildContext context) {
    var model = widget.model;

    return Card(
        clipBehavior: Clip.hardEdge,
        elevation: 5,
        shadowColor: Colors.grey,
        margin: EdgeInsets.only(left: 15, right: 15, bottom: 15),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10), side: BorderSide(color: Colors.white, width: 1)),
        child: Container(
          padding: EdgeInsets.only(left: 10, right: 20, top: 5, bottom: 5),
          width: MediaQuery.of(context).size.width,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Texts(
                widget.model.title,
                color: Colors.red,
                fontSize: 20,
              ),
              Texts(
                widget.model.desc,
                color: Colors.red,
                fontSize: 12,
              ),
              Container(
                alignment: Alignment.bottomLeft,
                child: MaterialButton(
                  height: 30,
                  color: HexColor('#D81A2E'),
                  onPressed: () => widget.model.action.onClick(model.item),
                  child: Texts(
                    TranslationBase.of(context).view,
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          ),
        )

        // Container(
        //   child: Stack(
        //     children: [
        //       Container(
        //         width: MediaQuery.of(context).size.width,
        //         child: Image.network(
        //           model.bannerUrl,
        //           fit: BoxFit.cover,
        //         ),
        //       ),
        //       Align(
        //         alignment: Alignment.bottomRight,
        //         child: Container(
        //             height: 25,
        //             margin: EdgeInsets.all(5),
        //             child: Row(
        //               mainAxisAlignment: MainAxisAlignment.end,
        //               children: [
        //                 MaterialButton(
        //                   color: HexColor('#D81A2E'),
        //                   onPressed: () => model.action.onClick(model.item),
        //                   child: Texts(
        //                     TranslationBase.of(context).view,
        //                     color: Colors.white,
        //                     fontSize: 12,
        //                     marginLeft: 2,
        //                     marginRight: 2,
        //                   ),
        //                 ),
        //                 VerticalDivider(
        //                   color: Colors.white,
        //                   thickness: 1,
        //                 ),
        //                 MaterialButton(
        //                   color: HexColor('#D81A2E'),
        //                   onPressed: () => model.action.onClick(model.item),
        //                   child: Texts(
        //                     TranslationBase.of(context).viewAll,
        //                     color: Colors.white,
        //                     fontSize: 12,
        //                     marginLeft: 2,
        //                     marginRight: 2,
        //                   ),
        //                 )
        //               ],
        //             )),
        //       ),
        //     ],
        //   ),
        // ),
        );
  }
}

// - - - - - - - - - - - - - -
//  Carousel Item Models
// - - - - - - - - - - - - - -
class OfferPackagesItemModel<T> {
  String bannerUrl;
  String title;
  String desc;
  T item;
  OfferPackagesItemActionModel action;

  OfferPackagesItemModel(this.bannerUrl, this.title, this.desc, this.item, this.action);

  static List<OfferPackagesItemModel> dummy() {
    List<OfferPackagesItemModel> list = List<OfferPackagesItemModel>();
    list.add(OfferPackagesItemModel<String>(
        "http://blog.naseej.com/hs-fs/hubfs/ellucian-banner-9.jpg?width=1486&height=782&name=ellucian-banner-9.jpg",
        "Sample Title",
        "Sample Desc here ....",
        "Sample Item",
        OfferPackagesItemActionModel<String>("Click here", (item) {
          var vm_categories = locator<OfferCategoriesViewModel>();
          vm_categories.service.getAllCategories(OffersCategoriesRequestModel(limit: 100, page: 1, sinceId: 0)).then((value) {
            print(value.toString());
            print(value.toString());
          });

          var vm_products = locator<OfferProductsViewModel>();
          vm_products.service.getAllProducts(OffersProductsRequestModel(categoryId: 125, limit: 100, page: 1, sinceId: 0)).then((value) {
            print(value.toString());
            print(value.toString());
          });
        })));
    return list;
  }
}

class OfferPackagesItemActionModel<T> {
  String actionTitle;
  Function(dynamic) onClick;

  OfferPackagesItemActionModel(this.actionTitle, this.onClick);
}