import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:SEFER/constant/colors.dart';
import 'package:SEFER/constant/info.dart';
import 'package:SEFER/constant/style.dart';
import 'package:SEFER/views/widgets/my_scafold.dart';
import 'package:SEFER/views/widgets/mycircular.dart';
import '../../controller/home/captin/duration_controller .dart';

class RideCalculateDriver extends StatelessWidget {
  RideCalculateDriver({super.key});
  // DurationController durationController = Get.put(DurationController());

  @override
  Widget build(BuildContext context) {
    Get.put(DurationController());
    return MyScafolld(
        title: 'Ride Summaries'.tr,
        body: [
          Center(
              child: GetBuilder<DurationController>(
            builder: (durationController) => durationController.isLoading
                ? const Center(child: MyCircularProgressIndicator())
                : Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '${'Average of Hours of'.tr} ${AppInformation.appName}${' is ON for this month'.tr}${' ${durationController.jsonData1['message'][0]['day'].toString().split('-')[1]}'.tr}',
                        style: AppStyle.title,
                        textAlign: TextAlign.center,
                      ),
                      SizedBox(
                        height: Get.height * .4,
                        child: LineChart(
                          duration: const Duration(milliseconds: 150),
                          curve: Curves.ease,
                          LineChartData(
                            lineBarsData: [
                              LineChartBarData(
                                spots: durationController.chartData,
                                isCurved: true,
                                color: Colors.deepPurpleAccent, // Custom color
                                barWidth: 3, // Thinner line
                                dotData: const FlDotData(
                                    show: true), // Show dots on each point
                                belowBarData: BarAreaData(
                                  // Add gradient fill below the line
                                  show: true,
                                  color: AppColor.deepPurpleAccent,
                                ),
                                isStrokeJoinRound: true,
                                shadow: const BoxShadow(
                                  color: AppColor.yellowColor,
                                  blurRadius: 4,
                                  offset: Offset(2, 2),
                                ),
                              ),
                            ],
                            showingTooltipIndicators: const [],
                            titlesData: FlTitlesData(
                              show: true,
                              topTitles: AxisTitles(
                                  axisNameWidget: Text(
                                    'Days'.tr,
                                    style: AppStyle.title,
                                  ),
                                  axisNameSize: 30,
                                  sideTitles: const SideTitles(
                                      reservedSize: 30, showTitles: true)),
                              bottomTitles: AxisTitles(
                                  axisNameWidget: Text(
                                    'Total Hours on month'.tr,
                                    style: AppStyle.title,
                                  ),
                                  axisNameSize: 30,
                                  sideTitles: const SideTitles(
                                      reservedSize: 30, showTitles: true)),
                              leftTitles: AxisTitles(
                                  axisNameWidget: Text(
                                    'Counts of Hours on days'.tr,
                                    style: AppStyle.title,
                                  ),
                                  axisNameSize: 30,
                                  sideTitles: const SideTitles(
                                      reservedSize: 30, showTitles: true)),
                            ),
                            gridData: const FlGridData(
                              show: true,
                            ),
                            borderData: FlBorderData(
                              show: true,
                              border: const Border(
                                bottom: BorderSide(color: AppColor.accentColor),
                                left: BorderSide(color: AppColor.accentColor),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
          )
              // BarChartWidget(),
              ),
        ],
        isleading: true);
  }
}

// class BarChartWidget extends StatelessWidget {
//   const BarChartWidget({super.key});

//   @override
//   Widget build(BuildContext context) {
//     final durationController = Get.put(DurationController());
//     return Obx(() {
//       final data = durationController.data;
//       double maxDuration = 0;

//       // Find the maximum duration to determine the maximum height of the bars
//       for (final entry in data) {
//         final durationInHours = entry.totalDuration.inHours.toDouble();
//         if (durationInHours > maxDuration) {
//           maxDuration = durationInHours;
//         }
//       }

//       return durationController.isLoading
//           ? const Center(
//               child: MyCircularProgressIndicator(),
//             )
//           : Column(
//               children: [
//                 Text(
//                   'Average of Hours of ${AppInformation.appName} is ON for this month'
//                       .tr,
//                   style: AppStyle.title,
//                 ),
//                 Padding(
//                   padding: const EdgeInsets.all(8.0),
//                   child: Container(
//                     height: Get.height * .7,
//                     decoration: AppStyle.boxDecoration,
//                     child: ListView.builder(
//                       scrollDirection: Axis.horizontal,
//                       itemCount: data.length,
//                       itemBuilder: (context, index) {
//                         final entry = data[index];
//                         final durationInHours =
//                             entry.totalDuration.inHours.toDouble();
//                         final dayLabel = entry.day.day.toString();

//                         return Padding(
//                           padding: const EdgeInsets.symmetric(horizontal: 4),
//                           child: AnimatedBuilder(
//                             // animation: durationController.animationController,
//                             builder: (context, child) {
//                               final animationValue =
//                                   durationController.animationController.value;
//                               final animatedValue =
//                                   (durationInHours / maxDuration) *
//                                       animationValue;

//                               return Column(
//                                 mainAxisAlignment: MainAxisAlignment.end,
//                                 children: [
//                                   Transform(
//                                     transform: Matrix4.identity()
//                                       ..setEntry(3, 2,
//                                           0.001) // Apply perspective for a 3D effect
//                                       ..rotateX(-0.5 *
//                                           animatedValue), // Rotate around X-axis
//                                     alignment: Alignment.bottomCenter,
//                                     child: Container(
//                                       width: 20,
//                                       height:
//                                           (durationInHours / maxDuration) * 400,
//                                       color: durationInHours > 8
//                                           ? AppColor.greenColor
//                                           : AppColor.yellowColor,
//                                       child: Center(
//                                         child: Text(
//                                           durationInHours.toStringAsFixed(
//                                             0,
//                                           ), // Display the duration value inside the bar
//                                           style: const TextStyle(
//                                             color: Colors.white,
//                                             fontWeight: FontWeight.bold,
//                                           ),
//                                         ),
//                                       ),
//                                     ),
//                                   ),
//                                   const SizedBox(height: 4),
//                                   Text(dayLabel),
//                                 ],
//                               );
//                             },
//                           ),
//                         );
//                       },
//                     ),
//                   ),
//                 ),
//               ],
//             );
//     });
//   }
// }