import 'package:SEFER/constant/colors.dart';
import 'package:SEFER/constant/style.dart';
import 'package:SEFER/controller/home/map_passenger_controller.dart';
import 'package:SEFER/views/widgets/elevated_btn.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../constant/api_key.dart';

class CupertinoDriverListWidget extends StatelessWidget {
  MapPassengerController mapPassengerController =
      Get.put(MapPassengerController());
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Driver List'.tr),
      ),
      child: SafeArea(
          child: ListView.separated(
        itemCount: mapPassengerController.driversForMishwari.length,
        separatorBuilder: (context, index) => const Divider(height: 1),
        itemBuilder: (context, index) {
          var driver = mapPassengerController.driversForMishwari[index];
          return Container(
            decoration: AppStyle.boxDecoration1,
            child: CupertinoListTile(
              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
              leading: CircleAvatar(
                radius: 25,
                backgroundImage: NetworkImage(
                  '${AK.serverPHP}/portrate_captain_image/${driver['id']}.jpg',
                ),
                backgroundColor: CupertinoColors.systemGrey5,
              ),
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '${driver['NAME'].toString().split(' ')[0]} ${driver['NAME'].toString().split(' ')[1]}',
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text('${'Age'.tr}: ${driver['age'].toString()}'),
                  Row(
                    children: [
                      const Icon(CupertinoIcons.star_fill,
                          size: 16, color: CupertinoColors.systemYellow),
                      const SizedBox(width: 4),
                      Text(driver['rating']?.toStringAsFixed(1) ?? 'N/A'.tr),
                      const SizedBox(width: 8),
                      Text('${'Rides'.tr}: ${driver['countRide']}'),
                    ],
                  ),
                ],
              ),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                          '${'Car'.tr}: ${driver['make']} ${driver['model']} (${driver['year']})'),
                      Text('${'Plate'.tr}: ${driver['car_plate']}'),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('${'Education'.tr}: ${driver['education']}'),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SizedBox(
                        // width: Get.width * .3,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('${'Color'.tr}: ${driver['color']}'),
                            const SizedBox(width: 8),
                            Container(
                              width: 20,
                              height: 20,
                              decoration: BoxDecoration(
                                color: hexToColor(
                                        driver['color_hex'].toString()) ??
                                    Colors.amber,
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              onTap: () {
                // Handle driver selection
                Get.defaultDialog(
                    title: '${'Selected driver'.tr}: ${driver['NAME']}',
                    content: Column(
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                                '${'Car'.tr}: ${driver['make']} ${driver['model']} (${driver['year']})'),
                            Text('${'Plate'.tr}: ${driver['car_plate']}'),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text('${'Color'.tr}: ${driver['color']}'),
                                const SizedBox(width: 8),
                                Container(
                                  width: 20,
                                  height: 20,
                                  decoration: BoxDecoration(
                                    color: hexToColor(
                                            driver['color_hex'].toString()) ??
                                        AppColor.bronze,
                                    borderRadius: BorderRadius.circular(4),
                                    border: Border.all(),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                    confirm: MyElevatedButton(
                        title: 'OK'.tr,
                        onPressed: () {
                          Get.back();
                          showDateTimePickerDialog(driver);
                        }));
                print('${'Selected driver'.tr}: ${driver['NAME']}');
                // Get.back(); // Close the dialog
              },
            ),
          );
        },
      )),
    );
  }

  Color hexToColor(String hexColor) {
    hexColor = hexColor.replaceAll("#", "");
    String colorString = "ff$hexColor";
    return Color(int.parse(colorString, radix: 16));
  }

  void showDriverSelectionDialog(Map<String, dynamic> driver) {
    Get.defaultDialog(
      title: '${'Selected driver'.tr}: ${driver['name']}',
      content: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
              '${'Car'.tr}: ${driver['make']} ${driver['model']} (${driver['year']})'),
          Text('${'Plate'.tr}: ${driver['car_plate']}'),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('${'Color'.tr}: ${driver['color']}'),
              const SizedBox(width: 8),
              Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: hexToColor(driver['color_hex'].toString()),
                  borderRadius: BorderRadius.circular(4),
                  border: Border.all(),
                ),
              ),
            ],
          ),
        ],
      ),
      confirm: MyElevatedButton(
        title: 'OK'.tr,
        onPressed: () {
          Get.back();
          showDateTimePickerDialog(driver);
        },
      ),
    );
  }

  void showDateTimePickerDialog(Map<String, dynamic> driver) {
    DateTime selectedDateTime = DateTime.now();

    Get.defaultDialog(
      barrierDismissible: false,
      title: 'select date and time of trip'.tr,
      content: SizedBox(
        // height: 400, // Adjust height as needed
        width: double.maxFinite,
        child: Column(
          children: [
            DateTimePickerWidget(),
          ],
        ),
      ),
      confirm: MyElevatedButton(
        title: 'Confirm Trip'.tr,
        onPressed: () async {
          DateTime selectedDateTime =
              mapPassengerController.selectedDateTime.value;
          // Save trip data and set up notifications
          Get.back();
          await mapPassengerController.saveTripData(driver, selectedDateTime);
        },
      ),
    );
  }
}

class DateTimePickerWidget extends StatelessWidget {
  final MapPassengerController controller = Get.put(MapPassengerController());

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        transitionBetweenRoutes: false,
        automaticallyImplyLeading: false,
        middle: Text('Date and Time Picker'),
      ),
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text(
                  '${'Selected Date and Time'.tr}: ${controller.selectedDateTime.value}',
                  style: const TextStyle(fontSize: 18),
                  textAlign: TextAlign.center,
                )),
            const SizedBox(height: 20),
            SizedBox(
              height: 200,
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.dateAndTime,
                initialDateTime: controller.selectedDateTime.value,
                onDateTimeChanged: (newDateTime) {
                  controller.updateDateTime(newDateTime);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}