import 'package:flutter/material.dart';
import 'package:initial_folder/models/history_transaction_model.dart';
import 'package:initial_folder/providers/history_transactions_provider.dart';
import 'package:initial_folder/screens/profile/account_sign_in/riwayat_transaksi.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/riwayat_list_delete.dart';
import 'package:provider/provider.dart';
import 'package:initial_folder/providers/order_provider.dart' as orderProvider;
import 'package:shimmer/shimmer.dart';

class RiwayatTransaksiPending extends StatelessWidget {
  const RiwayatTransaksiPending({Key? key}) : super(key: key);
  static const String routeName = "/riwayat-transaksi-pending";

  @override
  Widget build(BuildContext context) {
    Provider.of<orderProvider.OrderProvider>(context, listen: false).clear();

    return WillPopScope(
      onWillPop: () async {
        Navigator.pushReplacementNamed(context, RiwayatTransaksi.routeName);
        return false; 
      },
      child: SafeArea(
        child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          scrolledUnderElevation: 0.0,
          backgroundColor: Theme.of(context).colorScheme.background,
          title: Text(
            'Menunggu Pembayaran',
            style: thirdTextStyle.copyWith(
              fontWeight: semiBold,
              fontSize: getProportionateScreenWidth(15),
            ),
          ),
        ),
        body: StreamBuilder<List<HistoryTransactionModel>>(
          stream:
              Provider.of<HistoryTranscationsProvider>(context, listen: false)
                  .getHistoryTransactionStream(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(15)),
                child: Shimmer.fromColors(
                  baseColor: Colors.white,
                  highlightColor: Colors.grey,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        width: double.infinity,
                        height: getProportionateScreenHeight(90),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            width: getProportionateScreenWidth(100),
                            height: getProportionateScreenHeight(15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: getProportionateScreenWidth(130),
                            height: getProportionateScreenHeight(70),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                          SizedBox(width: getProportionateScreenWidth(10)),
                          Container(
                            width: getProportionateScreenWidth(130),
                            height: getProportionateScreenHeight(15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Container(
                        width: double.infinity,
                        height: getProportionateScreenHeight(90),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(15)),
                      Container(
                        width: double.infinity,
                        height: getProportionateScreenHeight(90),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            width: getProportionateScreenWidth(100),
                            height: getProportionateScreenHeight(15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: getProportionateScreenWidth(130),
                            height: getProportionateScreenHeight(70),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                          SizedBox(width: getProportionateScreenWidth(10)),
                          Container(
                            width: getProportionateScreenWidth(130),
                            height: getProportionateScreenHeight(15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: getProportionateScreenHeight(8)),
                      Container(
                        width: double.infinity,
                        height: getProportionateScreenHeight(90),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            } else if (snapshot.hasError) {
              return Text(snapshot.error.toString());
            } else {
              List<HistoryTransactionModel>? history = snapshot.data;

              return history?.length == 0
                  ? Center(
                      child: Text('Belum ada pembayaran dalam status menunggu'),
                    )
                  : RefreshIndicator(
                      onRefresh: () async {
                        await Provider.of<HistoryTranscationsProvider>(context,
                                listen: false)
                            .getHistoryTransaction();
                      },
                      color: primaryColor,
                      strokeWidth: 2,
                      child: Container(
                        margin: EdgeInsets.only(
                            top: getProportionateScreenHeight(15)),
                        child: ListView.builder(
                          itemCount: history?.length,
                          itemBuilder: (context, index) {
                            return RiwayatListDelete(
                              dataHistoryTransactionModel: history![index],
                              onPaymentCancelled: (message) async {
                                showDialog(
                                  context: context,
                                  builder: (context) => AlertDialog(
                                    backgroundColor: Theme.of(context)
                                        .colorScheme
                                        .background,
                                    elevation: 0.0,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(10),
                                    ),
                                    contentPadding:
                                        EdgeInsets.fromLTRB(12, 26, 22, 15),
                                    content: Padding(
                                      padding: EdgeInsets.only(
                                          bottom:
                                              getProportionateScreenHeight(14)),
                                      child: Text(
                                        textAlign: TextAlign.center,
                                        message,
                                        style: thirdTextStyle.copyWith(
                                          fontSize:
                                              getProportionateScreenWidth(12),
                                        ),
                                      ),
                                    ),
                                  ),
                                );
                                await Provider.of<HistoryTranscationsProvider>(
                                        context,
                                        listen: false)
                                    .getHistoryTransaction();
                              },
                            );
                          },
                        ),
                      ),
                    );
            }
          },
        ),
      ),),
    );
  }
}