import 'dart:async';
import 'package:flutter_svg/svg.dart';
import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

class Affiliatedashboard extends StatefulWidget {
  const Affiliatedashboard({super.key});

  @override
  State<Affiliatedashboard> createState() => _AffiliatedashboardState();
}

class _AffiliatedashboardState extends State<Affiliatedashboard>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 100),
    animationBehavior: AnimationBehavior.normal,
    vsync: this,
  )..repeat(reverse: true);
  late Animation<double> _fadeInFadeOut;
  bool isLoading = true;
  var totalClicks;
  var totalEarned;
  var totalOrders;
  var totalordersShipped;
  var customers_list_filter = "";
  var customer_filter_from_date = "";
  var customer_filter_to_date = "";
  var earnings_filter = "";
  var earnings_filter_from_date = "";
  var earnings_filter_to_date = "";
  int _currentIndex = 0;

  final List<String> Filteritems = [
    'Today',
    'This Month',
    'Past 7 days',
    'Last Month',
    'Custom',
  ];

  final List<String> Filteritems2 = [
    'Today',
    'This Month',
    'Past 7 days',
    'Last Month',
    'Custom',
  ];
  String? selectedValue;
  String? selectedValue2;
  DateTimeRange? selectedDateRange;

  DateTimeRange? getDateRange(String filter) {
    DateTime now = DateTime.now();
    switch (filter) {
      case 'Today':
        return DateTimeRange(
          start: DateTime(now.year, now.month, now.day),
          end: DateTime(now.year, now.month, now.day),
        );
      case 'Yesterday':
        DateTime yesterday = now.subtract(Duration(days: 1));
        return DateTimeRange(
          start: DateTime(yesterday.year, yesterday.month, yesterday.day),
          end: DateTime(yesterday.year, yesterday.month, yesterday.day),
        );
      case 'This Month':
        return DateTimeRange(
          start: DateTime(now.year, now.month, 1),
          end: DateTime(now.year, now.month + 1, 0),
        );
      case 'Last Month':
        DateTime firstDayLastMonth = DateTime(now.year, now.month - 1, 1);
        DateTime lastDayLastMonth = DateTime(now.year, now.month, 0);
        return DateTimeRange(start: firstDayLastMonth, end: lastDayLastMonth);
      case 'Past 7 days':
        DateTime startOfPast7Days = now.subtract(Duration(days: 6));
        return DateTimeRange(
          start: DateTime(startOfPast7Days.year, startOfPast7Days.month,
              startOfPast7Days.day),
          end: DateTime(now.year, now.month, now.day),
        );
      case 'Custom':
        return null; // Handle this separately
      default:
        return null;
    }
  }

// Function to show custom date range picker
  Future<DateTimeRange?> showCustomDateRangePicker(BuildContext context) async {
    return await showDateRangePicker(
      context: context,
      firstDate: DateTime(2020),
      lastDate: DateTime(2100),
    );
  }

// Function to format date for display as YYYY-MM-DD
  String formatDate(DateTime date) {
    return "${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}";
  }

// Example usage for displaying the selected date range
  String getFormattedDateRange() {
    if (selectedDateRange != null) {
      return '${formatDate(selectedDateRange!.start)} - ${formatDate(selectedDateRange!.end)}';
    }
    return 'Select Item';
  }

  @override
  void initState() {
    _fadeInFadeOut = Tween<double>(begin: 0.3, end: 1.5).animate(_controller);

    super.initState();
  }


  void _prepareChartData() {
    chartData = []
        .map((earning) {
      // Convert rawDate or date to DateTime
      DateTime? dateTime;
      if (earning.rawDate != null) {
        dateTime = DateTime.tryParse(earning.rawDate!);
      } else if (earning.date != null) {
        dateTime = DateTime.tryParse(earning.date!);
      }

      // Convert creditAmount to double
      double? credit = double.tryParse(earning.creditAmount ?? '0');

      if (dateTime != null && credit != null) {
        return _ChartData(dateTime, credit);
      } else {
        return null;
      }
    })
        .where((data) => data != null) // Remove null values
        .cast<_ChartData>()
        .toList();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }



  List<_ChartData> chartData = [];
  @override
  Widget build(BuildContext context) {

    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    return  Scaffold(
      backgroundColor: Color(0xFFF4F5FA),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Column(
            children: [
              Container(
                width: screenWidth,
                height: screenHeight * 0.28,
                child: GridView.builder(
                  itemCount: 4,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    // 4 items in a row for tablet
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    childAspectRatio: 80 / 138,
                  ),
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    List<String> labels = [
                      "Total Earnings",
                      "Total Orders",
                      "Pending Remitance Amount",
                      "Total Orders Shipped",
                    ];
                    List<String> labelsTexts = [
                      "${totalEarned}",
                      "${totalOrders}",
                      "${totalClicks}",
                      "${totalordersShipped}",
                    ];
                    return Container(
                      padding:
                      EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                      decoration: BoxDecoration(
                          color: (index == 0)
                              ? Color(0xFF382560)
                              : Color(0xFFD7E0FF),
                          borderRadius: BorderRadius.circular(14)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            "${labelsTexts[index]}",
                            style: TextStyle(
                              color: (index == 0)
                                  ? Colors.white
                                  : Color(0xFF382560),
                              fontFamily: "Inter",
                              fontWeight: FontWeight.w400,
                              fontSize: 28,
                            ),
                          ),
                          Text(
                            "${labels[index]}",
                            style: TextStyle(
                              color: (index == 0)
                                  ? Colors.white
                                  : Color(0xFF566CB8),
                              fontFamily: "Inter",
                              fontWeight: FontWeight.w400,
                              fontSize: 12,
                            ),
                          )
                        ],
                      ),
                    );
                  },
                ),
              ),

              if (chartData.length >= 0) ...[
                Container(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  height: screenHeight * 0.5,
                  width: screenWidth,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12)),
                  child: Column(
                    children: [
                      Container(
                        padding:
                        EdgeInsets.symmetric(vertical: 0, horizontal: 10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              child: Text(
                                'Earnings Overview',
                                style: TextStyle(
                                  color: Color(0xFF382560),
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ),
                            DropdownButtonHideUnderline(
                              child: DropdownButton2<String>(
                                isExpanded: true,
                                hint: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    SizedBox(width: 4),
                                    Expanded(
                                      child: Text(
                                        selectedValue2 ?? 'Select Item',
                                        style: TextStyle(
                                          fontSize: 14,
                                          fontWeight: FontWeight.w400,
                                          color: Colors.white,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                  ],
                                ),
                                items: Filteritems2.map(
                                        (String item) => DropdownMenuItem<String>(
                                      value: item,
                                      child: Text(
                                        item,
                                        textAlign: TextAlign.right,
                                        style: const TextStyle(
                                          fontSize: 14,
                                          fontWeight: FontWeight.w400,
                                          color: Colors.white,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    )).toList(),
                                value: selectedValue2,
                                style: TextStyle(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w400,
                                  color: Colors.white,
                                ),
                                alignment: Alignment.center,
                                onChanged: (value) async {
                                  if (value == 'Custom') {
                                    selectedDateRange =
                                    await showCustomDateRangePicker(
                                        context);
                                  } else {
                                    selectedDateRange = getDateRange(value!);
                                  }

                                  setState(() {
                                    selectedValue2 = value;
                                    // print(selectedDateRange);
                                    // print(selectedValue2);

                                    if (selectedDateRange != null) {
                                      // Extracting the 'from' and 'to' dates directly from DateTimeRange
                                      var fromRange = formatDate(
                                          selectedDateRange!
                                              .start); // Format start date
                                      var toRange = formatDate(
                                          selectedDateRange!
                                              .end); // Format end date

                                      // print('From range: $fromRange'); // Output: From range: 2024-09-21
                                      // print('To range: $toRange');       // Output: To range: 2024-09-21
                                      earnings_filter = "1";
                                      earnings_filter_from_date = fromRange;
                                      earnings_filter_to_date = toRange;
                                    }
                                  });
                                },
                                buttonStyleData: ButtonStyleData(
                                  height: 40,
                                  width: 160,
                                  padding: const EdgeInsets.only(
                                      left: 14, right: 14),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(14),
                                    border: Border.all(
                                      color: Colors.black26,
                                    ),
                                    color: Color(0xFF382560),
                                  ),
                                  elevation: 0,
                                ),
                                iconStyleData: IconStyleData(
                                  icon: SvgPicture.asset(
                                    "assets/images/dropdown_burron2.svg",
                                  ),
                                  iconSize: 14,
                                ),
                                dropdownStyleData: DropdownStyleData(
                                  direction: DropdownDirection.right,
                                  maxHeight: 200,
                                  width: 160,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(14),
                                    color: Color(0xFFDDE1F2),
                                  ),
                                  offset: const Offset(0, 0),
                                  scrollbarTheme: ScrollbarThemeData(
                                    radius: const Radius.circular(40),
                                    thickness: MaterialStateProperty.all(0),
                                    thumbVisibility:
                                    MaterialStateProperty.all(true),
                                  ),
                                ),
                                menuItemStyleData: const MenuItemStyleData(
                                  height: 40,
                                  padding: EdgeInsets.only(left: 14, right: 14),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),

                    ],
                  ),
                ),
              ],

            ],
          ),
        ),
      ),
    );
  }


}

class _ChartData {
  _ChartData(this.date, this.creditAmount);
  final DateTime date;
  final double creditAmount;
}
