import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.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/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';

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

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

}

class MobilePayNowState extends State<MobilePayNow> {
  late Order order;
  late List<PaymentPlatform> paymentPlatforms;
  late User _user;

  
  @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,
          ),
        ),
      );
    }

    BuildContext mainContext = context;

    ListView listView = ListView.builder(
      itemCount: paymentPlatforms.length + 1,
      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;
        paymentPlatform = paymentPlatforms[position - 1];
        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: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: (){
            Navigator.of(context).pop();
          },
        ),
        title: Text(S.of(context).pay_now),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: listView,
    );
  }

  @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();
      _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);
      });
    });
  }
}