import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:initial_folder/providers/payments_provider.dart';
import 'package:initial_folder/screens/checkout/components/bottom_sheet_detail.dart';
import 'package:initial_folder/screens/checkout/gopay/payment_instruction_gopay.dart';
import 'package:initial_folder/screens/checkout/gopay/qr_code_gopay.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/login_regist/default_button.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

class BayarGopay extends StatelessWidget {
  BayarGopay({this.idCart});

  final List<String>? idCart;

  static String routeName = "/bayarGopay";

  @override
  Widget build(BuildContext context) {
    Widget bottomNav() {
      return DefaultButton(
        text: 'Bayar dengan QRIS',
        press: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => GopaySplashScreen(idCart: idCart),
            ),
          );
        },
      );
    }

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.background,
        title: Text(
          'Bayar Dengan QRIS',
          style: thirdTextStyle.copyWith(
            letterSpacing: 1,
            fontWeight: semiBold,
            fontSize: getProportionateScreenWidth(14),
          ),
        ),
      ),
      body: Consumer<PaymentsProvider>(
        builder: (context, state, _) {
          if (state.stateProcess == Process.loading) {
            return SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Center(child: CircularProgressIndicator()));
          } else if (state.state == ResultState.gagal) {
            return Center(child: Text('Terjadi Kesalahan'));
          } else {
            return SingleChildScrollView(
              child: Container(
                margin: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(16)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox(height: 10),
                    Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primaryContainer,
                        borderRadius: BorderRadius.circular(8),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            spreadRadius: 0,
                            blurRadius: 4,
                            offset: Offset(0, 2),
                          ),
                        ],
                      ),
                      margin: EdgeInsets.only(
                          left: getProportionateScreenWidth(2),
                          right: getProportionateScreenWidth(2)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  padding: EdgeInsets.symmetric(
                                      vertical: 15,
                                      horizontal:
                                          getProportionateScreenWidth(15)),
                                  child: Text(
                                    'Informasi Pembayaran',
                                    style: thirdTextStyle.copyWith(
                                      fontWeight: semiBold,
                                      fontSize: getProportionateScreenWidth(14),
                                      color: Theme.of(context)
                                          .colorScheme
                                          .onBackground,
                                    ),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.symmetric(
                                      horizontal:
                                          getProportionateScreenWidth(15)),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        'Order ID',
                                        style: thirdTextStyle.copyWith(
                                          fontWeight: reguler,
                                          fontSize:
                                              getProportionateScreenWidth(10),
                                          fontFamily: "Poppins",
                                        ),
                                      ),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            state.detailOrder[0].idOrder,
                                            style: thirdTextStyle.copyWith(
                                              fontWeight: reguler,
                                              fontSize:
                                                  getProportionateScreenWidth(
                                                      12),
                                            ),
                                          ),
                                          GestureDetector(
                                            onTap: () {
                                              Clipboard.setData(ClipboardData(
                                                text: state
                                                    .detailOrder[0].idOrder,
                                              )).then(
                                                (_) {
                                                  ScaffoldMessenger.of(context)
                                                      .showSnackBar(
                                                    SnackBar(
                                                      content: Text(
                                                          'Berhasil Menyalin Kode Pembayaran'),
                                                    ),
                                                  );
                                                },
                                              );
                                            },
                                            child: Text(
                                              "Salin",
                                              style: primaryTextStyle.copyWith(
                                                  letterSpacing: 0.5,
                                                  color: primaryColor,
                                                  fontSize:
                                                      getProportionateScreenWidth(
                                                          10),
                                                  fontWeight: reguler),
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                          height:
                                              getProportionateScreenHeight(10)),
                                      Text(
                                        'Total Pembayaran',
                                        style: thirdTextStyle.copyWith(
                                          fontWeight: reguler,
                                          fontSize:
                                              getProportionateScreenWidth(10),
                                          fontFamily: "Poppins",
                                        ),
                                      ),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            'Rp. ${NumberFormat.currency(locale: 'id', symbol: '').format(double.parse(state.detailOrder[0].totalPayment))}',
                                            style: thirdTextStyle.copyWith(
                                              fontWeight: semiBold,
                                              fontSize:
                                                  getProportionateScreenWidth(
                                                      12),
                                            ),
                                          ),
                                          GestureDetector(
                                            onTap: () {
                                              showModalBottomSheet(
                                                backgroundColor:
                                                    Theme.of(context)
                                                        .colorScheme
                                                        .background,
                                                elevation: 0.0,
                                                context: context,
                                                shape: RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.vertical(
                                                    top: Radius.circular(20),
                                                  ),
                                                ),
                                                builder: (context) {
                                                  return BottomSheetDetail();
                                                },
                                              );
                                            },
                                            child: Text(
                                              "Detail Pembayaran",
                                              style: thirdTextStyle.copyWith(
                                                  letterSpacing: 0.5,
                                                  color: primaryColor,
                                                  fontSize:
                                                      getProportionateScreenWidth(
                                                          10),
                                                  fontWeight: reguler),
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                          height:
                                              getProportionateScreenHeight(12)),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: getProportionateScreenHeight(30)),
                    PaymentInstructionGopay(),
                    SizedBox(height: getProportionateScreenHeight(15)),
                    bottomNav(),
                    SizedBox(height: getProportionateScreenHeight(15)),
                  ],
                ),
              ),
            );
          }
        },
      ),
    );
  }
}