import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:model_per_view/models/cart/item_cart.dart';
import 'package:model_per_view/scoped_models/cart_view_model.dart';
import 'package:model_per_view/scoped_models/product_detail_view_model.dart';
import 'package:model_per_view/ui/views/base_view.dart';
import 'package:model_per_view/ui/widgets/cart/cart_nodata_widget.dart';
import 'package:model_per_view/ui/widgets/loading/loading.dart';

const String imageAsset = 'assets/img/2.jpg';

class CartView extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return BaseView<CartViewModel>(
        onModelReady: (model) => model.fetchProductCart(),
        builder: (context, child, model) {
          switch (model.state) {
            case ViewState.Busy:
              return Loading.getLoadingUi(context);
            case ViewState.NoDataAvailable:
              return CartNoDataWidget(context, "Your cart is empty");
            case ViewState.Error:
              return Loading.errorUi(context);
            case ViewState.DataFetched:
            default:
              model.sumPrice();
              return Scaffold(
                key: _scaffoldkey,
                appBar: PreferredSize(
                  preferredSize: Size.fromHeight(65.0),
                  child: AppBar(
                    title: Padding(
                      padding: const EdgeInsets.only(top: 35),
                      child: Container(
                        height: 33,
                        width: double.infinity,
                        child: Text(
                          'My Cart (${model.getCartQty().toString()})',
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                    leading: Padding(
                        padding: const EdgeInsets.only(
                            left: 14, top: 35, right: 15, bottom: 3),
                        child: InkWell(
                            onTap: () => Navigator.pop(context),
                            child: SvgPicture.asset(
                              'assets/img/home/left-arrow.svg',
                              width: 21,
                              height: 13,
                            ))),
                    flexibleSpace: Container(
                      decoration: new BoxDecoration(
                        gradient: new LinearGradient(
                            colors: [
                              const Color(0xFF39C2C9),
                              const Color(0xFF21DFC3),
                            ],
                            begin: const FractionalOffset(0.0, 0.0),
                            end: const FractionalOffset(1.0, 0.0),
                            stops: [0.0, 1.0],
                            tileMode: TileMode.clamp),
                      ),
                    ),
                  ),
                ),
                body: SafeArea(
                  child: RefreshIndicator(
                    onRefresh: () => onRefresh(model),
                    child: ListView(
                      children: <Widget>[
                        Column(
                          children: addWidget(context, model),
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                padding: EdgeInsets.only(left: 20),
                                width: MediaQuery
                                    .of(context)
                                    .size
                                    .width,
                                child: TextField(
                                  decoration: new InputDecoration.collapsed(
                                      hintText: 'Apply coupon'),
                                ),
                              ),
                              flex: 7,
                            ),
                            Expanded(
                              flex: 3,
                              child: Container(
                                margin: EdgeInsets.only(left: 30, right: 30),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(3),
                                    color: Colors.black),
                                child: Container(
                                  margin: EdgeInsets.all(5),
                                  child: Center(
                                    child: Text(
                                      'send'.toUpperCase(),
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        )
                      ],
                    ),
                  ),
                ),
                bottomNavigationBar: Container(
                  padding: EdgeInsets.only(left: 10, right: 10, top: 5),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border(
                          top:
                          BorderSide(color: Colors.grey[300], width: 1.0))),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      model.collapseCart
                          ? Container(
                        width: double.infinity,
                        child: Stack(
                          children: <Widget>[
                            Container(
                                width: double.infinity,
                                child: Text(
                                  'Order Summary',
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w400,
                                      color: Color(0xFF000000)),
                                  textAlign: TextAlign.center,
                                )),
                            Positioned(
                              left: 0,
                              child: GestureDetector(
                                onTap: () {
                                  model.showDetailOrder();
                                },
                                child: Icon(
                                  Icons.clear,
                                  color: Color(0xFF4C4C4C),
                                  size: 14,
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                          : Container(),
                      model.collapseCart
                          ? Column(
                        mainAxisSize: MainAxisSize.min,
                        children: _buildTotalPrice(
                            model.getProductCart.items, model),
                      )
                          : Container(),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(
                              flex: 4,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  InkWell(
                                    onTap: () {
                                      model.showDetailOrder();
                                    },
                                    child: Row(
                                      children: <Widget>[
                                        Text('Total'),
                                        SizedBox(
                                          width: 5,
                                        ),
                                        model.collapseCart
                                            ? SvgPicture.asset(
                                            'assets/img/product/collapse-up.svg')
                                            : SvgPicture.asset(
                                            'assets/img/product/collapse-down.svg'),
                                      ],
                                    ),
                                  ),
                                  model.getProductCart != null
                                      ? Text(
                                    'USD \$${model.sum}00',
                                    style: TextStyle(
                                      fontWeight: FontWeight.w600,
                                      color: Colors.black,
                                      fontSize: 18.0,
                                    ),
                                  )
                                      : Text(
                                    'USD \$0',
                                    style: TextStyle(
                                      fontWeight: FontWeight.w600,
                                      color: Colors.black,
                                      fontSize: 18.0,
                                    ),
                                  ),
                                ],
                              )),
                          Flexible(
                              flex: 6,
                              child: buildCheckoutButton(model, context)),
                        ],
                      ),
                    ],
                  ),
                ),
              );
          }
        });
  }

  Widget buildCheckoutButton(CartViewModel model, BuildContext context) {
    if (model.isProcessing) {
      return Column(
        children: <Widget>[
          GestureDetector(
            child: Container(
              height: 50,
              margin: EdgeInsets.only(top: 5, bottom: 5),
              padding: EdgeInsets.only(
                left: 10,
                right: 10,
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                color: Color(0xFF000000),
              ),
              child: Center(
                  child: Text(
                    'PROCESSING',
                    style: TextStyle(color: Colors.white),
                  )),
            ),
          ),
        ],
      );
    } else {
      return Column(
        children: <Widget>[
          GestureDetector(
            onTap: () async {
              model.processToCheckoutAction(context);
            },
            child: Container(
              height: 50,
              margin: EdgeInsets.only(top: 5, bottom: 5),
              padding: EdgeInsets.only(
                left: 10,
                right: 10,
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                color: Color(0xFF000000),
              ),
              child: Center(
                  child: Text(
                    'CHECK OUT',
                    style: TextStyle(color: Colors.white),
                  )),
            ),
          ),
        ],
      );
    }
  }

  Future<Null> onRefresh(CartViewModel model) {
    final Completer<Null> completer = new Completer<Null>();
    new Timer(const Duration(seconds: 1), () {
      completer.complete(null);
    });
    return completer.future.then((_) {
      model.refreshProductCart();
    });
  }

  addWidget(BuildContext context, CartViewModel model) {
    List<Widget> listCart = [];

    for (var i = 0; i < model.getProductCart.items.length; i++) {

      ItemCart itemCart = model.getProductCart.items[i];
      int itemId = itemCart.item_id;
      int qty = itemCart.qty;
      var k = 0;

      listCart.add(Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: const EdgeInsets.all(8.0),
          // constraints: BoxConstraints(minHeight: 150, maxHeight: 350),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Divider(
                height: 1,
                color: Colors.black38,
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Expanded(
                    flex: 30,
                    child: Container(
                      child: CachedNetworkImage(
                          imageUrl: model.getProductCart.items[i]
                              .extension_attributes.thumbnail,
                          fit: BoxFit.cover,
                          placeholder: (context, url) =>
                              Center(
                                child: new CircularProgressIndicator(),
                              ),
                          errorWidget: (context, url, error) =>
                          new Icon(Icons.error)),
                    ),
                  ),
                  Expanded(
                    flex: 70,
                    child: Container(
                      child: Stack(
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  '${model.getProductCart.items[i].sku}',
                                  style: TextStyle(
                                      fontSize: 14,
                                      color: Color(0xB3000000),
                                      fontWeight: FontWeight.w500),
                                ),
                                SizedBox(
                                  height: 5.0,
                                ),
                                Text(
                                  '${model.getProductCart.items[i].name}',
                                  style: TextStyle(
                                      color: Color(0xD9000000),
                                      fontWeight: FontWeight.w400,
                                      fontSize: 15.0),
                                ),
                                Text(
                                  "\$${model.getProductCart.items[i].price}",
                                  style: TextStyle(
                                      fontWeight: FontWeight.normal,
                                      fontSize: 14.0),
                                ),
//                                Text(
//                                  "\$0.00",
//                                  style: TextStyle(
//                                    fontWeight: FontWeight.normal,
//                                    color: Colors.grey,
//                                    fontSize: 14.0,
//                                    decoration: TextDecoration.lineThrough,
//                                  ),
//                                ),
//                                Container(
//                                  child: Column(
//                                    children:_buildItemOptionInCart(),
//                                  ),
//                                ),
//                                Container(
//                                  child: Wrap(
//                                    direction: Axis.horizontal,
//                                    alignment: WrapAlignment.center,
//                                    crossAxisAlignment:
//                                    WrapCrossAlignment.center,
//                                    children: <Widget>[
//                                      Container(
//                                        padding: EdgeInsets.only(right: 10),
//                                        child: SvgPicture.asset(
//                                          'assets/img/product/gift-big-box.svg',
//                                          width: 12.5,
//                                          height: 20,
//                                        ),
//                                      ),
//                                      Text(
//                                        'Send as a Gift',
//                                        style: TextStyle(
//                                          fontFamily: 'SF',
//                                          color: Colors.black,
//                                          fontSize: 12,
//                                          fontWeight: FontWeight.w400,
//                                        ),
//                                      ),
//                                      SizedBox(
//                                        width: 10,
//                                      ),
//                                      Icon(
//                                        Icons.arrow_forward_ios,
//                                        color: Color(0xFFC7C7CC),
//                                        size: 14,
//                                      )
//                                    ],
//                                  ),
//                                ),
                              ],
                            ),
                          ),
                          Positioned(
                            top: 10,
                            right: 5,
                            child: GestureDetector(
                              onTap: () async =>  await model.remove(),
                              child: Container(
                                height: 25,
                                width: 25,
                                alignment: Alignment.center,
                                child: Icon(
                                  Icons.clear,
                                  color: Colors.black87,
                                  size: 14,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _buildRowIncrease(
                      context, model, model.getProductCart.items[i], i),
                  GestureDetector(
                    onTap: () async =>  await model.remove(),
                    child: Container(
                      padding:
                      EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 5),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(3),
                          border: Border.all(color: Colors.grey)),
                      child: Text(
                        'Remove',
                        style: TextStyle(
                            fontSize: 12,
                            color: Color(0xFFB3000000),
                            fontWeight: FontWeight.w400),
                      ),
                    ),
                  )
                ],
              ),
              SizedBox(
                height: 10,
              ),
//              Divider(
//                height: 1,
//                color: Colors.black38,
//              ),
//              SizedBox(
//                height: 10,
//              ),
//              Column(
//                mainAxisSize: MainAxisSize.min,
//                children: _buildItemInListPrice(data),
//              ),
//              SizedBox(
//                height: 10,
//              ),
//              Divider(
//                height: 1,
//                color: Colors.black38,
//              ),
            ],
          ),
        ),
      ));
    }
    return listCart;
  }

  Row _buildRowIncrease(BuildContext context, CartViewModel model,
      ItemCart item, int position) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Listener(
          onPointerDown: (details) {
            model.increaseCounterDownWhilePressed(position);
          },
          onPointerUp: (details) {
            model.stopIncrease();
          },
          child: Container(
            height: 25,
            padding: EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 5),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(5),
                  bottomLeft: Radius.circular(5),
                )),
            child: Text(
              '-',
              style: TextStyle(
                  color: Color(0xFFB3000000),
                  fontSize: 12,
                  fontWeight: FontWeight.w400),
            ),
          ),
        ),
        Container(
          width: 25,
          height: 25,
          padding: EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 5),
          decoration: BoxDecoration(
            border: Border(
                top: BorderSide(color: Colors.grey),
                bottom: BorderSide(color: Colors.grey)),
          ),
          child: Text(
            '${model.listQty(position)}',
            softWrap: true,
            style: TextStyle(
                fontSize: 12,
                color: Color(0xFFB3000000),
                fontWeight: FontWeight.w400),
            textAlign: TextAlign.center,
          ),
        ),
        Listener(
          onPointerDown: (details) {
            model.increaseCounterWhilePressed(position);
          },
          onPointerUp: (details) {
            model.stopIncrease();
          },
          child: Container(
            height: 25,
            padding: EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 5),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(5),
                  bottomRight: Radius.circular(5),
                )),
            child: Text(
              '+',
              style: TextStyle(
                  fontSize: 12,
                  color: Color(0xFFB3000000),
                  fontWeight: FontWeight.w400),
            ),
          ),
        ),
        SizedBox(
          width: 10,
        ),
        model.showUpdate ? Material(
          child: InkWell(
            onTap: () {
              model.addProductToCart(context, position);
            },
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                  Container(

                    padding: EdgeInsets.only(
                        left: 5, right: 5, top: 5, bottom: 5),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(3),
                        border: Border.all(color: Colors.grey)),
                    child: Text(
                      'Update',
                      style: TextStyle(
                          fontSize: 12,
                          color: Colors.red,
                          fontWeight: FontWeight.w400),
                    ),
                  ),
                Center(
                  child: model.showUpdateProcessing ? SizedBox(
                    width: 15,
                    height: 15,
                    child: Center(
                      child: CircularProgressIndicator(),
                    ),
                  ) : Container(),
                )
              ],
              ),
          ),
        ) : Container()
      ],
    );
  }

  BoxDecoration myBoxDecoration() {
    return BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: Colors.grey,
          width: 1.0,
        ),
      ),
    );
  }

  _buildItemInListPrice(ItemCart data, CartViewModel model) {
    List<Widget> listDetail = [];
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Subtotal',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$${data.price * data.qty}',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Shipping',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$0.00',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Tax:',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$0.00',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Total',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Color(0xFF000000)),
        ),
        Text(
          'USD \$${data.price * data.qty}',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Color(0xFF000000)),
        )
      ],
    ));
    return listDetail;
  }

  ///total
  _buildTotalPrice(List<ItemCart> items, CartViewModel model) {
    List<Widget> listDetail = [];

    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Subtotal',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$${model.sum}',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Shipping',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$0.00',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Tax:',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        ),
        Text(
          'USD \$0.00',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: Color(0xB3000000)),
        )
      ],
    ));
    listDetail.add(Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Total',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Color(0xFF000000)),
        ),
        Text(
          'USD \$${model.sum}00',
          style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Color(0xFF000000)),
        )
      ],
    ));
    return listDetail;
  }
}