import 'dart:io';

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

class PaymentMethod extends StatefulWidget {
  Function onSelectedMethod;
  bool isShowInstallments;

  PaymentMethod({this.onSelectedMethod, this.isShowInstallments = false});

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

class _PaymentMethodState extends State<PaymentMethod> {
  String selectedPaymentMethod = "MADA";

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      appBarTitle: TranslationBase.of(context).paymentMethod,
      isShowAppBar: true,
      showNewAppBar: true,
      showNewAppBarTitle: true,
      backgroundColor: CustomColors.appBackgroudGrey2Color,
      body: Container(
        margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(4, 15.0, 4, 0.0),
                  child: Text(TranslationBase.of(context).selectPaymentOption, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
                ),
                Container(
                  width: double.infinity,
                  child: InkWell(
                    onTap: () {
                      updateSelectedPaymentMethod("MADA");
                    },
                    child: Card(
                      elevation: 0.0,
                      margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0),
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: selectedPaymentMethod == "MADA" ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Row(
                          children: [
                            Container(
                              width: 24,
                              height: 24,
                              decoration: containerColorRadiusBorderWidth(selectedPaymentMethod == "MADA" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5),
                            ),
                            mWidth(12),
                            Container(
                              height: 70.0,
                              width: 70.0,
                              padding: EdgeInsets.all(7.0),
                              child: Image.asset("assets/images/new/payment/Mada.png"),
                            ),
                            mFlex(1),
                            if (selectedPaymentMethod == "MADA")
                              Container(
                                decoration: containerRadius(CustomColors.green, 200),
                                padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12),
                                child: Text(
                                  TranslationBase.of(context).paymentSelected,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 11,
                                  ),
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  child: InkWell(
                    onTap: () {
                      updateSelectedPaymentMethod("VISA");
                    },
                    child: Card(
                      elevation: 0.0,
                      margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0),
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: selectedPaymentMethod == "VISA" ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Row(
                          children: [
                            Container(
                              width: 24,
                              height: 24,
                              decoration: containerColorRadiusBorderWidth(selectedPaymentMethod == "VISA" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5),
                            ),
                            mWidth(12),
                            Container(
                              height: 60.0,
                              padding: EdgeInsets.all(7.0),
                              width: 60,
                              child: Image.asset("assets/images/new/payment/visa.png"),
                            ),
                            mFlex(1),
                            if (selectedPaymentMethod == "VISA")
                              Container(
                                decoration: containerRadius(CustomColors.green, 200),
                                padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12),
                                child: Text(
                                  TranslationBase.of(context).paymentSelected,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 11,
                                  ),
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  child: InkWell(
                    onTap: () {
                      updateSelectedPaymentMethod("MASTERCARD");
                    },
                    child: Card(
                      elevation: 0.0,
                      margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0),
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: selectedPaymentMethod == "MASTERCARD" ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Row(
                          children: [
                            Container(
                              width: 24,
                              height: 24,
                              decoration: containerColorRadiusBorderWidth(selectedPaymentMethod == "MASTERCARD" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5),
                            ),
                            mWidth(12),
                            Container(
                              height: 60.0,
                              padding: EdgeInsets.all(7.0),
                              width: 60,
                              child: Image.asset("assets/images/new/payment/Mastercard.png"),
                            ),
                            mFlex(1),
                            if (selectedPaymentMethod == "MASTERCARD")
                              Container(
                                decoration: containerRadius(CustomColors.green, 200),
                                padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12),
                                child: Text(
                                  TranslationBase.of(context).paymentSelected,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 11,
                                  ),
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                if (widget.isShowInstallments)
                  Container(
                    width: double.infinity,
                    child: InkWell(
                      onTap: () {
                        updateSelectedPaymentMethod("Installment");
                      },
                      child: Card(
                        elevation: 0.0,
                        margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0),
                        color: Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                          side: selectedPaymentMethod == "Installment" ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: Row(
                            children: [
                              Container(
                                width: 24,
                                height: 24,
                                decoration: containerColorRadiusBorderWidth(selectedPaymentMethod == "Installment" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5),
                              ),
                              mWidth(12),
                              Container(
                                height: 60.0,
                                padding: EdgeInsets.all(7.0),
                                width: 90,
                                // child: Image.asset("assets/images/new/payment/installments.png"),
                                child: SvgPicture.asset("assets/images/new/payment/instalmt.svg"),
                              ),
                              mFlex(1),
                              if (selectedPaymentMethod == "Installment")
                                Container(
                                  decoration: containerRadius(CustomColors.green, 200),
                                  padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12),
                                  child: Text(
                                    TranslationBase.of(context).paymentSelected,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 11,
                                    ),
                                  ),
                                ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                Platform.isIOS
                    ? Container(
                        width: double.infinity,
                        child: InkWell(
                          onTap: () {
                            updateSelectedPaymentMethod("ApplePay");
                          },
                          child: Card(
                            elevation: 0.0,
                            margin: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 8.0),
                            color: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                              side: selectedPaymentMethod == "ApplePay" ? BorderSide(color: Colors.green, width: 2.0) : BorderSide(color: Colors.transparent, width: 0.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(12.0),
                              child: Row(
                                children: [
                                  Container(
                                    width: 24,
                                    height: 24,
                                    decoration: containerColorRadiusBorderWidth(selectedPaymentMethod == "ApplePay" ? CustomColors.accentColor : Colors.transparent, 100, Colors.grey, 0.5),
                                  ),
                                  mWidth(12),
                                  Container(
                                    height: 60.0,
                                    padding: EdgeInsets.all(7.0),
                                    width: 60,
                                    child: Image.asset("assets/images/new/payment/Apple_Pay.png"),
                                  ),
                                  mFlex(1),
                                  if (selectedPaymentMethod == "ApplePay")
                                    Container(
                                      decoration: containerRadius(CustomColors.green, 200),
                                      padding: EdgeInsets.only(top: 6, bottom: 6, left: 12, right: 12),
                                      child: Text(
                                        TranslationBase.of(context).paymentSelected,
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 11,
                                        ),
                                      ),
                                    ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      )
                    : Container(),
                SizedBox(
                  height: 150.0,
                ),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: Container(
        padding: EdgeInsets.all(16),
        color: Colors.white,
        child:
        // selectedPaymentMethod == "ApplePay"
        //     ? ApplePayButton(
        //         paymentConfigurationAsset: 'applepay.json',
        //         paymentItems: _paymentItems,
        //         style: ApplePayButtonStyle.black,
        //         type: ApplePayButtonType.inStore,
        //         width: MediaQuery.of(context).size.width,
        //         height: 50,
        //         margin: const EdgeInsets.only(top: 15.0),
        //         onPaymentResult: (value) {
        //           print(value);
        //           // applePayResponse = ApplePayResponse.fromJson(value);
        //           // print(applePayResponse.token.data);
        //         },
        //         onError: (error) {
        //           print(error);
        //         },
        //         loadingIndicator: const Center(
        //           child: CircularProgressIndicator(),
        //         ),
        //       )
        //     :
          Container(
                width: MediaQuery.of(context).size.width,
                height: 50.0,
                color: Colors.white,
                // margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 20.0),
                child: ButtonTheme(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  minWidth: MediaQuery.of(context).size.height * 0.1,
                  height: 45.0,
                  child: RaisedButton(
                    color: CustomColors.green,
                    textColor: Colors.white,
                    disabledTextColor: Colors.white,
                    disabledColor: new Color(0xFFbcc2c4),
                    elevation: 0,
                    onPressed: () {
                      widget.onSelectedMethod(selectedPaymentMethod);
                      Navigator.pop(context, selectedPaymentMethod);
                    },
                    child: Text(TranslationBase.of(context).confirm.toUpperCase(),
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                        )),
                  ),
                ),
              ),
      ),
    );
  }

  updateSelectedPaymentMethod(String selectedMethod) {
    setState(() {
      selectedPaymentMethod = selectedMethod;
    });
  }
}