import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_wisetronic/widgets/general/breadcrumbs.dart';
import 'package:flutter_wisetronic/widgets/general/navigationbar.dart';

import '../../constants.dart';
import '../../events/eventbus.dart';
import '../../events/events.dart';
import '../../generated/l10n.dart';
import '../../models/order.dart';
import '../../models/payment_platform.dart';
import '../../models/stripe_payment_method.dart';
import '../../models/user.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';
import '../../utils/utils.dart';
import '../../widgets/general/payment_verification_code_dialog.dart';

class DesktopPayNow extends StatefulWidget {
  final Key key;
  final int orderId;
  const DesktopPayNow(this.orderId, {this.key});

  @override
  State<StatefulWidget> createState() {
    return DesktopPayNowState();
  }

}

class DesktopPayNowState extends State<DesktopPayNow> {
  Order order;
  List<PaymentPlatform> paymentPlatforms;
  User _user;

  bool nativePay;

  double sideSpace = 0;
  double mainSpace = 1200;
  
  @override
  Widget build(BuildContext context) {
    store.dispatch(UpdateContext(context));

    if (order == null ) {
      return new Scaffold(
        body: Center(
          child: SpinKitWave(
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ),
      );
    }

    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }

    BuildContext mainContext = context;

    ListView listView = ListView.builder(
      itemCount: nativePay ? paymentPlatforms.length + 3 : paymentPlatforms.length + 2,
      itemBuilder: (BuildContext context, int position) {
        if (position == 0) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: EdgeInsets.only(top: 32.0, right: 16.0, left: 16.0, bottom: 32.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      S.of(context).payment_amount,
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.black26,
                      ),
                    ),
                    Text(
                      '\$${order.totalPrice.toStringAsFixed(2)}',
                      style: TextStyle(
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                          width: 10.0,
                          color: Colors.black26,
                        )
                    )
                ),
              ),
              store.state.deviceId != null && store.state.deviceId.isNotEmpty || store.state.tableNumber != null && store.state.tableNumber.isNotEmpty ?
              GestureDetector(
                child: Container(
                  padding: EdgeInsets.only(top: 20.0, bottom: 20.0, left: 16.0, right: 16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Icon(
                        Icons.local_cafe,
                        size: 50.0,
                      ),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(left: 20.0, right: 10.0),
                              child: Text(
                                S.of(context).pay_later,
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 20.0, right: 10.0),
                              child: Text(
                                S.of(context).pay_after_meal,
                                style: TextStyle(
                                  fontSize: 14.0,
                                  color: Colors.black26,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Icon(
                        Icons.arrow_forward_ios,
                        color: Colors.black26,
                      ),
                    ],
                  ),
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                            width: 10.0,
                            color: Colors.black26,
                          )
                      )
                  ),
                ),
                onTap: () {
                  Routes.router.navigateTo(context, '/orders', replace: true, clearStack: true);
                },
              ) :
              SizedBox.shrink()
            ],
          );
        }
        PaymentPlatform paymentPlatform;
        if (position == 1) {
          if (_user.stripePaymentMethods.length > 0) {
            paymentPlatform = paymentPlatforms[position - 1];
            Column column = Column(
              children: <Widget>[],
            );
            column.children.add(
              Container(
                padding: EdgeInsets.all(16.0),
                width: double.infinity,
                child: Text(
                  S.of(context).pay_with_existing_cards,
                  textAlign: TextAlign.left,
                ),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      width: 1,
                      color: Colors.black26,
                    ),
                  ),
                ),
              ),
            );
            for (StripePaymentMethod stripePaymentMethod in _user.stripePaymentMethods) {
              column.children.add(
                GestureDetector(
                  child: Container(
                    padding: EdgeInsets.only(
                        top: 16.0, left: 16.0, right: 16.0, bottom: 16.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        stripePaymentMethod.cardBrand == 'visa' ?
                        Image.asset(
                          'assets/images/visa.png',
                          width: 50.0,
                          height: 50.0,
                          fit: BoxFit.fill,
                        ) : (stripePaymentMethod.cardBrand == 'mastercard' ?
                        Image.asset(
                          'assets/images/master.png',
                          width: 50.0,
                          height: 50.0,
                          fit: BoxFit.fill,
                        ) : Icon(
                          Icons.credit_card, size: 50.0, color: Colors.black38,)),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                margin: EdgeInsets.only(left: 20.0, right: 10.0),
                                child: Text(
                                  '**** ${stripePaymentMethod.cardLast4}',
                                  style: TextStyle(
                                    fontSize: 20.0,
                                  ),
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 20.0, right: 10.0),
                                child: Text(
                                  S.of(context).expire_token(stripePaymentMethod.cardExpMonth, stripePaymentMethod.cardExpYear),
                                  style: TextStyle(
                                    fontSize: 14.0,
                                    color: Colors.black26,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Icon(
                          Icons.arrow_forward_ios,
                          color: Colors.black26,
                        ),
                      ],
                    ),
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          width: 0.5,
                          color: Colors.black12,
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    showDialog(
                      context: mainContext,
                      builder: (BuildContext context) {
                        return PaymentVerificationCodeDialog(_user, () {
                          Util.goPayment(context, order, paymentPlatform,
                              stripePaymentMethod: stripePaymentMethod);
                        }, () {

                        });
                      },
                    );
                  },
                ),
              );
            }
            column.children.add(
              Container(
                width: double.infinity,
                child: SizedBox.shrink(),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      width: 10,
                      color: Colors.black26,
                    ),
                  ),
                ),
              )
            );
            return column;
          } else {
            return SizedBox.shrink();
          }
        }
        if (position == 2 && nativePay) {
          paymentPlatform = paymentPlatforms[position - 2];
          return Util().getNativePay(mainContext, order, paymentPlatform);
        }
        paymentPlatform = nativePay ? paymentPlatforms[position - 3] : paymentPlatforms[position - 2];
        return GestureDetector(
          child: Container(
            padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0, bottom: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(right: 10.0),
                  child: Util.showImage(paymentPlatform.icon,
                    errorWidget: (context, url, error) => Icon(Icons.broken_image, size: 50.0, color: Colors.transparent,),
                    fit: BoxFit.cover,
                    width: 50.0,
                    height: 50.0,
                  ),
                ),
                Expanded(
                  child: Text(
                    S.of(context).pay_with_token(PaymentPlatform.getPaymentPlatformName(context, paymentPlatform.code)),
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.black26,
                ),
              ],
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 10,
                  color: Colors.black26,
                ),
              ),
            ),
          ),
          onTap: () {
            Util.goPayment(context, order, paymentPlatform);
          },
        );
      }
    );
    
    return Scaffold(
      appBar: NavigationBar(
        title: S.of(context).blog,
        back: true,
        breadCrumbs: [
          BreadCrumb(S.of(context).pay_now, null),
        ],
        breadCrumbHeight: Constants.BREADCRUMB_HEIGHT,
      ),
      body: Row(
        children: [
          Container(width: sideSpace,),
          Expanded(child: listView,),
          Container(width: sideSpace,),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    HttpUtil.httpGet(
      'v1/${widget.orderId}/paymentplatforms',
    ).then((data) {
      paymentPlatforms = (data['payment_platforms'] as List).map((e) =>
          PaymentPlatform.fromJson(e)).toList();
      PaymentPlatform pp = paymentPlatforms[0];
      if (Constants.ENABLE_NATIVE_PAY && pp.publishableKey != null
          && pp.publishableKey.isNotEmpty && pp.merchantId != null
          && pp.merchantId.isNotEmpty) {
        nativePay = true;
      } else {
        nativePay = false;
      }
      _user = User.fromJson(data['contact']);
      store.dispatch(UpdateCurrentUser(_user));
      eventBus.fire(OnCurrentUserUpdated());
      setState(() {
        order = Order.fromJson(data['order']);
      });
    }).catchError((error) {
      Utils.showMessageDialog(context, error, onOk: () {
        Routes.router.navigateTo(context, "/orders", replace: true);
      });
    });
  }
}

// 198.54.117.10