import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class PaymentMethod extends StatefulWidget {
  @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,
      body: Container(
        margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
                  alignment: Alignment.center,
                  child: Text(TranslationBase.of(context).selectPaymentOption,
                      style: TextStyle(
                          fontSize: 26.0, fontWeight: FontWeight.bold)),
                ),
                Container(
                  margin: EdgeInsets.only(top: 25.0),
                  child: Flex(
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: InkWell(
                            onTap: () {
                              updateSelectedPaymentMethod("MADA");
                            },
                            child: Card(
                              elevation: 3.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: 5.0)
                                    : BorderSide(
                                        color: Colors.transparent, width: 0.0),
                              ),
                              child: Container(
                                height: 120.0,
                                padding: EdgeInsets.all(7.0),
                                width: MediaQuery.of(context).size.width * 0.45,
                                child: Image.asset(
                                    "assets/images/new-design/mada.png"),
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          child: InkWell(
                            onTap: () {
                              updateSelectedPaymentMethod("VISA");
                            },
                            child: Card(
                              elevation: 3.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: 5.0)
                                    : BorderSide(
                                        color: Colors.transparent, width: 0.0),
                              ),
                              child: Container(
                                height: 120.0,
                                padding: EdgeInsets.all(7.0),
                                width: MediaQuery.of(context).size.width * 0.45,
                                child: Image.asset(
                                    "assets/images/new-design/visa.png"),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 25.0),
                  child: Flex(
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: InkWell(
                            onTap: () {
                              updateSelectedPaymentMethod("MASTERCARD");
                            },
                            child: Card(
                              elevation: 3.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: 5.0)
                                    : BorderSide(
                                        color: Colors.transparent, width: 0.0),
                              ),
                              child: Container(
                                height: 120.0,
                                padding: EdgeInsets.all(7.0),
                                width: MediaQuery.of(context).size.width * 0.45,
                                child: Image.asset(
                                    "assets/images/new-design/mastercard.png"),
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          child: InkWell(
                            onTap: () {
                              updateSelectedPaymentMethod("Installment");
                            },
                            child: Card(
                              elevation: 3.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: 5.0)
                                    : BorderSide(
                                        color: Colors.transparent, width: 0.0),
                              ),
                              child: Container(
                                height: 120.0,
                                padding: EdgeInsets.all(7.0),
                                width: MediaQuery.of(context).size.width * 0.45,
                                child: Image.asset(
                                    "assets/images/new-design/installment.png"),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 25.0),
                  child: Flex(
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: InkWell(
                            onTap: () {
                              updateSelectedPaymentMethod("ApplePay");
                            },
                            child: Card(
                              elevation: 3.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: 5.0)
                                    : BorderSide(
                                        color: Colors.transparent, width: 0.0),
                              ),
                              child: Container(
                                height: 120.0,
                                padding: EdgeInsets.all(20.0),
                                child: SvgPicture.asset(
                                    "assets/images/new-design/applepay.svg"),
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 150.0,
                ),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: Container(
        width: MediaQuery.of(context).size.width,
        height: 50.0,
        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: new Color(0xFF60686b),
            textColor: Colors.white,
            disabledTextColor: Colors.white,
            disabledColor: new Color(0xFFbcc2c4),
            onPressed: () {
              Navigator.pop(context, selectedPaymentMethod);
            },
            child: Text(TranslationBase.of(context).confirm,
                style: TextStyle(fontSize: 18.0)),
          ),
        ),
      ),
    );
  }

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