import 'dart:async';

import 'package:flutter/material.dart';
import 'package:initial_folder/providers/payments_provider.dart';
import 'package:initial_folder/screens/checkout/batas_bayar.dart';
import 'package:initial_folder/screens/checkout/gopay/batas_bayar_gopay.dart';
import 'package:initial_folder/screens/checkout/gopay/gopay_payment_confirmation.dart';
import 'package:initial_folder/screens/profile/account_sign_in/riwayat_transaksi_pending.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/custom_navigator.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';

class QRCodeGopay extends StatelessWidget {
  final List<String>? idCart;
  QRCodeGopay({this.idCart});

  @override
  Widget build(BuildContext context) {
    var detailOrder =
        Provider.of<PaymentsProvider>(context, listen: false).detailOrder;
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.background,
        scrolledUnderElevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: getProportionateScreenWidth(10),
            vertical: getProportionateScreenHeight(10),
          ),
          child: Column(
            children: [
              Stack(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Image.asset(
                        "assets/images/qris_background.png",
                        width: getProportionateScreenWidth(328),
                        height: getProportionateScreenHeight(470),
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(height: getProportionateScreenHeight(45)),
                      Text(
                        "VOCASIA",
                        style: secondaryTextStyle.copyWith(
                          fontWeight: bold,
                          fontSize: getProportionateScreenWidth(13),
                          color: baruTexthitam,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(15)),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: getProportionateScreenWidth(40)),
                        child: Text(
                          "Lakukan pembayaran dengan cara scan code dibawah ini dan lakukan pembayaran sesuai dengan tagihan yang diterima.",
                          textAlign: TextAlign.center,
                          style: secondaryTextStyle.copyWith(
                            fontSize: getProportionateScreenWidth(9),
                            color: baruTexthitam,
                          ),
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(15)),
                      Center(
                        child: Container(
                          height: getProportionateScreenHeight(150),
                          width: getProportionateScreenWidth(150),
                          child: Image.network(detailOrder[0].qrCodeUrl!
                              // 'https://api.sandbox.midtrans.com/v2/gopay/916c417c-dd69-455f-9f8d-997b31d38c21/qr-code'
                              ),
                        ),
                      ),
                      // Image.network(),
                      SizedBox(height: getProportionateScreenHeight(5)),
                      Text(
                        'Order ID',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          color: baruTexthitam,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(2)),
                      Text(
                        detailOrder[0].idOrder,
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          color: baruTexthitam,
                          fontWeight: semiBold,
                          letterSpacing: 1,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(6)),
                      Text(
                        'Total',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          color: baruTexthitam,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(2)),
                      Text(
                        'Rp. ${NumberFormat.currency(locale: 'id', symbol: '').format(double.parse(detailOrder[0].totalPayment))}',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          color: baruTexthitam,
                          fontWeight: semiBold,
                          letterSpacing: 2,
                        ),
                      ),

                      // Center(
                      //   child: Text(
                      //     detailOrder[0].qrCodeUrl!.toString(),
                      //     style: thirdTextStyle.copyWith(
                      //         fontWeight: semiBold,
                      //         fontSize: 14,
                      //         color: Color(0xff181818)),
                      //   ),
                      // ),

                      // GestureDetector(
                      //   child: Container(
                      //     padding: EdgeInsets.all(16),
                      //     width: double.infinity,
                      //     height: getProportionateScreenHeight(44),
                      //     decoration: BoxDecoration(
                      //         color: Color(0xff25D366),
                      //         border: Border.all(color: Color(0xff25D366), width: 1),
                      //         borderRadius: BorderRadius.circular(10)),
                      //     child: Center(
                      //       child: Text(
                      //         'Pembayaran Gojek',
                      //         style: thirdTextStyle.copyWith(
                      //             fontSize: 14, color: Color(0xfff4f4f4)),
                      //       ),
                      //     ),
                      //   ),
                      //   onTap: () async {
                      //     await openUrl(detailOrder[0].urlGopay!.toString());
                      //   },
                      // ),
                    ],
                  ),
                ],
              ),
              SizedBox(height: getProportionateScreenHeight(10)),
              Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(10)),
                child: GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(16),
                    width: double.infinity,
                    height: getProportionateScreenHeight(40),
                    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),
                        ),
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Cara Pembayaran',
                          style: thirdTextStyle.copyWith(
                            fontSize: getProportionateScreenWidth(11),
                            fontWeight: semiBold,
                          ),
                        ),
                        Icon(
                          Icons.keyboard_arrow_down_outlined,
                          size: getProportionateScreenWidth(22),
                          color: Theme.of(context).colorScheme.onBackground,
                        ),
                      ],
                    ),
                  ),
                  onTap: () {
                    Navigator.push(
                      context,
                      CustomNavigator(
                        child: GopayPaymentConfirmation(),
                      ),
                    );
                  },
                ),
              ),
              SizedBox(height: getProportionateScreenHeight(20)),
              Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(10)),
                child: GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(16),
                    width: double.infinity,
                    height: getProportionateScreenHeight(43),
                    decoration: BoxDecoration(
                        color: primaryColor,
                        border: Border.all(
                          color: primaryColor,
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(10)),
                    child: Center(
                      child: Text(
                        'Unduh QRIS',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          fontWeight: semiBold,
                          color: baruTextutih,
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    // Navigator.push(
                    //     context,
                    //     MaterialPageRoute(
                    //         builder: (context) => GopayPaymentConfirmation()));
                  },
                ),
              ),
              SizedBox(height: 16),
              Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(10)),
                child: GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(16),
                    width: double.infinity,
                    height: getProportionateScreenHeight(43),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: primaryColor,
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(10)),
                    child: Center(
                      child: Text(
                        'Cek Status Transaksi',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          color: primaryColor,
                          fontWeight: semiBold,
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    print(idCart);
                    // Navigator.push(
                    //   context,
                    //   MaterialPageRoute(
                    //     builder: (context) => BatasBayarGopay(idCart: idCart),
                    //   ),
                    // );
                    Navigator.pushReplacement(
                      context,
                      CustomNavigator(
                        child: RiwayatTransaksiPending(),
                      ),
                    );
                  },
                ),
              ),
              SizedBox(height: getProportionateScreenHeight(20)),
            ],
          ),
        ),
      ),
    );
  }
}

class GopaySplashScreen extends StatefulWidget {
  final List<String>? idCart;
  GopaySplashScreen({this.idCart});

  @override
  State<GopaySplashScreen> createState() => _GopaySplashScreenState();
}

class _GopaySplashScreenState extends State<GopaySplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
      Duration(seconds: 2),
      () => Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => QRCodeGopay(idCart: widget.idCart),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SafeArea(
          child: Container(
        color: Color(0xff4DC256),
        alignment: Alignment.center,
        child: Image(
          image: AssetImage('assets/images/gopay1.png'),
          height: 50,
        ),
      )),
    );
  }
}

Future<void> openUrl(String url,
    {bool forceWebView = false, enableJavaScript = false}) async {
  await launchUrl(Uri.parse(url));
}