import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_countdown_timer/current_remaining_time.dart';
import 'package:flutter_countdown_timer/flutter_countdown_timer.dart';
import 'package:initial_folder/base_service.dart';
import 'package:initial_folder/providers/order_provider.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:intl/intl.dart';
import 'package:provider/provider.dart';

import '../../../size_config.dart';
import '../../../theme.dart';

class GopayPaymentConfirmation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var detailOrder =
        Provider.of<PaymentsProvider>(context, listen: false).detailOrder;
    var orders = Provider.of<OrderProvider>(context, listen: false).orders;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.background,
        centerTitle: true,
        scrolledUnderElevation: 0.0,
        title: Text(
          'Cara Pembayaran',
          style: secondaryTextStyle.copyWith(
            letterSpacing: 1,
            fontWeight: semiBold,
            fontSize: getProportionateScreenWidth(14),
          ),
        ),
      ),
      body: Padding(
        padding:
            EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(10)),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: getProportionateScreenHeight(290),
                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.symmetric(
                  vertical: getProportionateScreenHeight(9),
                ),
                padding: EdgeInsets.symmetric(
                  horizontal: getProportionateScreenWidth(10),
                  vertical: getProportionateScreenHeight(15),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Batas Waktu Pembayaran',
                      style: thirdTextStyle.copyWith(
                        fontFamily: "Poppins",
                        fontSize: getProportionateScreenWidth(11),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          DateFormat('E, d MMM y H:m WIB')
                              .format(detailOrder[0].transactionTimeLimit),
                          style: thirdTextStyle.copyWith(
                            fontWeight: semiBold,
                            fontSize: SizeConfig.blockHorizontal! * 3,
                          ),
                        ),
                        Container(
                          decoration: BoxDecoration(
                            color: sevenColor,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          padding: EdgeInsets.symmetric(
                            horizontal: getProportionateScreenWidth(3),
                            vertical: getProportionateScreenHeight(2),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(
                                Icons.access_time,
                                color: baruTextutih,
                                size: getProportionateScreenWidth(14),
                              ),
                              SizedBox(width: getProportionateScreenWidth(2)),
                              CountdownTimer(
                                endTime: DateTime.now()
                                    .add(Duration(hours: 24))
                                    .millisecondsSinceEpoch,
                                widgetBuilder: (_, CurrentRemainingTime? time) {
                                  if (time == null) {
                                    return Text(
                                      '00:00:00',
                                      style: thirdTextStyle.copyWith(
                                        fontWeight: semiBold,
                                        letterSpacing: 1,
                                        fontSize:
                                            getProportionateScreenWidth(10),
                                        color: baruTextutih,
                                      ),
                                    );
                                  } else {
                                    return Text(
                                      '${time.hours}:${time.min}:${time.sec}',
                                      style: thirdTextStyle.copyWith(
                                        fontWeight: semiBold,
                                        letterSpacing: 1,
                                        fontSize:
                                            getProportionateScreenWidth(10),
                                        color: baruTextutih,
                                      ),
                                    );
                                  }
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: getProportionateScreenHeight(4)),
                    Divider(
                      color: secondaryColor,
                      thickness: 1,
                    ),
                    Text(
                      "Kursus",
                      style: thirdTextStyle.copyWith(
                        fontFamily: "Poppins",
                        fontSize: getProportionateScreenWidth(11),
                      ),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: orders.map((e) {
                        return listCourse(
                          imageUrl: e.imageUrl,
                          instructor: e.instructor,
                          title: e.title,
                          price: e.price,
                          discountPrice: e.discountPrice,
                        );
                      }).toList(),
                    ),
                    SizedBox(height: getProportionateScreenHeight(10)),
                    Text(
                      'Metode Pembayaran',
                      style: thirdTextStyle.copyWith(
                        letterSpacing: 0.5,
                        fontWeight: reguler,
                        fontSize: getProportionateScreenWidth(10),
                      ),
                    ),
                    SizedBox(height: getProportionateScreenHeight(5)),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "QRIS",
                          style: thirdTextStyle.copyWith(
                            letterSpacing: 1,
                            fontWeight: semiBold,
                            fontSize: getProportionateScreenWidth(13),
                          ),
                        ),
                        Container(
                          width: getProportionateScreenWidth(50),
                          height: getProportionateScreenWidth(17),
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color:
                                    Theme.of(context).colorScheme.brightness ==
                                            Brightness.dark
                                        ? Colors.transparent
                                        : baruTexthitam.withOpacity(0.3),
                                spreadRadius: 1,
                                blurRadius: 3,
                                offset: Offset(0, 1),
                              ),
                            ],
                            borderRadius: BorderRadius.circular(2),
                            image: DecorationImage(
                              fit: BoxFit.fill,
                              image: AssetImage("assets/images/qris.png"),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: getProportionateScreenHeight(15)),
                    Text(
                      "Order ID",
                      style: thirdTextStyle.copyWith(
                        letterSpacing: 0.5,
                        fontWeight: reguler,
                        fontSize: getProportionateScreenWidth(10),
                      ),
                    ),
                    SizedBox(height: getProportionateScreenHeight(5)),
                    Row(
                      children: [
                        Text(
                          detailOrder[0].idOrder,
                          style: thirdTextStyle.copyWith(
                            letterSpacing: 1,
                            fontWeight: semiBold,
                            fontSize: getProportionateScreenWidth(14),
                          ),
                        ),
                        Spacer(),
                        GestureDetector(
                          onTap: () {
                            Clipboard.setData(
                                    ClipboardData(text: detailOrder[0].idOrder))
                                .then(
                              (_) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                    content: Text('Berhasil Menyalin Order ID'),
                                  ),
                                );
                              },
                            );
                          },
                          child: Text(
                            "Salin",
                            style: thirdTextStyle.copyWith(
                                letterSpacing: 0.5,
                                color: primaryColor,
                                fontSize: getProportionateScreenWidth(10),
                                fontWeight: reguler),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: getProportionateScreenHeight(15)),
                    Text(
                      'Total Pembayaran',
                      style: thirdTextStyle.copyWith(
                        letterSpacing: 0.5,
                        fontWeight: reguler,
                        fontSize: getProportionateScreenWidth(10),
                      ),
                    ),
                    SizedBox(height: getProportionateScreenHeight(6)),
                    Row(
                      children: [
                        Text(
                          'Rp. ${NumberFormat.currency(locale: 'id', symbol: '', decimalDigits: 0).format(double.parse(detailOrder[0].totalPayment))}',
                          style: thirdTextStyle.copyWith(
                            letterSpacing: 1,
                            fontWeight: semiBold,
                            fontSize: getProportionateScreenWidth(14),
                          ),
                        ),
                        Spacer(),
                        GestureDetector(
                          onTap: () {
                            Clipboard.setData(ClipboardData(
                                    text: detailOrder[0].totalPayment))
                                .then(
                              (_) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                    content: Text(
                                        'Berhasil Menyalin Total Pembayaran'),
                                  ),
                                );
                              },
                            );
                          },
                          child: Text(
                            "Salin",
                            style: thirdTextStyle.copyWith(
                                letterSpacing: 0.5,
                                color: primaryColor,
                                fontSize: getProportionateScreenWidth(10),
                                fontWeight: reguler),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(height: getProportionateScreenHeight(13)),
              PaymentInstructionGopay(),
              SizedBox(height: getProportionateScreenHeight(17)),
              Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(10)),
                child: GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(16),
                    width: double.infinity,
                    height: getProportionateScreenHeight(42),
                    decoration: BoxDecoration(
                        color: primaryColor,
                        border: Border.all(
                          color: primaryColor,
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(10)),
                    child: Center(
                      child: Text(
                        'Lihat QRIS',
                        style: thirdTextStyle.copyWith(
                          fontSize: getProportionateScreenWidth(13),
                          fontWeight: semiBold,
                          color: baruTextutih,
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
              ),
              SizedBox(height: getProportionateScreenHeight(21)),
            ],
          ),
        ),
      ),
    );
  }

  Widget listCourse({
    String? imageUrl,
    String? title,
    String? instructor,
    String? price,
    String? discountPrice,
    int? totalPrices,
  }) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: getProportionateScreenHeight(9)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            width: getProportionateScreenWidth(60),
            height: getProportionateScreenHeight(30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(2),
              image: DecorationImage(
                image: NetworkImage(imageUrl ??
                    '$baseUrl/uploads/courses_thumbnail/course_thumbnail_default_57.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(width: getProportionateScreenWidth(10)),
          Flexible(
            flex: 7,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title!,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: thirdTextStyle.copyWith(
                    letterSpacing: 0.5,
                    fontWeight: reguler,
                    fontSize: getProportionateScreenWidth(11),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
