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

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

  @override
  Widget build(BuildContext context) {
    return MyScafolld(
        title: 'Ride Summary'.tr,
        body: const [
          Center(
            child: 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 ${AppInfo.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),
                                ],
                              );
                            },
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ],
            );
    });
  }
}