diplomatic-quarter/lib/pages/pharmacies/screens/payment-method-select-page.dart

import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/OrderPreviewViewModel.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/borderedButton.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/material.dart';

class PaymentMethodSelectPage extends StatefulWidget {
  @override
  _PaymentMethodSelectPageState createState() =>
      _PaymentMethodSelectPageState();
}

class _PaymentMethodSelectPageState extends State<PaymentMethodSelectPage> {
  PaymentOption selectedPaymentOption;

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    double cardWidth = screenSize.width / 2 - 32;

    return AppScaffold(
      title: "Payment method",
      isShowAppBar: true,
      isShowDecPage: false,
      body: Container(
        width: double.infinity,
        margin: EdgeInsets.symmetric(horizontal: 0, vertical: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Texts(
                TranslationBase.of(context).selectPaymentOption,
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 0, vertical: 16),
              child: Column(
                children: [
                  Row(
                    children: [
                      PaymentMethodCard(
                          cardWidth,
                          selectedPaymentOption,
                          PaymentOption.meda,
                          () => {
                                setState(() {
                                  selectedPaymentOption = PaymentOption.meda;
                                })
                              }),
                      PaymentMethodCard(
                          cardWidth,
                          selectedPaymentOption,
                          PaymentOption.sadad,
                          () => {
                                setState(() {
                                  selectedPaymentOption = PaymentOption.sadad;
                                })
                              }),
                    ],
                  ),
                  Row(
                    children: [
                      PaymentMethodCard(
                          cardWidth,
                          selectedPaymentOption,
                          PaymentOption.visa,
                          () => {
                                setState(() {
                                  selectedPaymentOption = PaymentOption.visa;
                                })
                              }),
                      PaymentMethodCard(
                          cardWidth,
                          selectedPaymentOption,
                          PaymentOption.mastercard,
                          () => {
                                setState(() {
                                  selectedPaymentOption =
                                      PaymentOption.mastercard;
                                })
                              }),
                    ],
                  ),
                  PaymentMethodCard(
                      (cardWidth * 2 + 32),
                      selectedPaymentOption,
                      PaymentOption.installments,
                      () => {
                            setState(() {
                              selectedPaymentOption =
                                  PaymentOption.installments;
                            })
                          }),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomSheet: Container(
        height: screenSize.height * 0.08,
        margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: BorderedButton(
          TranslationBase.of(context).next,
          backgroundColor: Color(0xff5AB154),
          textColor: Colors.white,
          fontSize: 16,
          hPadding: 8,
          vPadding: 12,
          handler: selectedPaymentOption != null
              ? () => {Navigator.pop(context, selectedPaymentOption)}
              : null,
        ),
      ),
    );
  }
}

class PaymentMethodCard extends StatelessWidget {
  final double cardWidth;
  final PaymentOption selectedPaymentOption;
  final PaymentOption paymentOption;
  final Function selectMethod;

  PaymentMethodCard(this.cardWidth, this.selectedPaymentOption,
      this.paymentOption, this.selectMethod);

  @override
  Widget build(BuildContext context) {
    bool isSelected = false;
    if (selectedPaymentOption != null &&
        selectedPaymentOption == paymentOption) {
      isSelected = true;
    }

    return InkWell(
      onTap: selectMethod,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 2, vertical: 0),
        child: Stack(
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
              margin: EdgeInsets.symmetric(horizontal: 14, vertical: 8),
              decoration: new BoxDecoration(
                color: Colors.grey.shade100,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(8),
                border: Border.fromBorderSide(BorderSide(
                  color: isSelected ? Color(0xff20BC11) : Colors.grey.shade300,
                  width: 0.8,
                )),
              ),
              width: cardWidth,
              child: Image.asset(
                getPaymentOptionImage(paymentOption),
                fit: BoxFit.cover,
              ),
            ),
            if (isSelected)
              Positioned(
                right: 1,
                child: Icon(
                  Icons.check_circle,
                  color: Color(0xff20BC11),
                  size: 30,
                ),
              ),
          ],
        ),
      ),
    );
  }

  String getPaymentOptionImage(PaymentOption paymentOption) {
    String assetFile = "assets/images/pharmacy_module/payment/";
    switch (paymentOption.index) {
      case 0:
        return "${assetFile}mada.png";
        break;
      case 1:
        return "${assetFile}sadad.png";
        break;
      case 2:
        return "${assetFile}visa.png";
        break;
      case 3:
        return "${assetFile}mastercard.png";
        break;
      case 4:
        return "${assetFile}installment.png";
        break;
      default:
        return "";
    }
  }
}