import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:syncrow_web/core/extension/build_context_x.dart';
import 'package:syncrow_web/pages/device_managment/all_devices/helper/route_controls_based_code.dart';

import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
  final AllDevicesModel device;

  const DeviceControlDialog({super.key, required this.device});

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      insetPadding: const EdgeInsets.all(20),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: SizedBox(
        width: 798,
        height: context.screenHeight * 0.7,
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(
                  child: Text(
                    device.categoryName ?? 'Device Control',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                      color: ColorsManager.dialogBlueTitle,
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                _buildDeviceInfoSection(),
                const SizedBox(height: 20),
                //// BUILD DEVICE CONTROLS
                ///
                //// ROUTE TO SPECIFIC CONTROL VIEW BASED ON DEVICE CATEGORY 
                routeControlsWidgets(device: device),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildDeviceInfoSection() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),
      child: Table(
        children: [
          TableRow(
            children: [
              _buildInfoRow('Product Name:', device.categoryName ?? 'N/A'),
              _buildInfoRow('Device ID:', device.uuid ?? ''),
            ],
          ),
          TableRow(children: [
            _buildInfoRow('Virtual Address:',
                'Area - Street 1 - Building 1 - First Floor'),
            const SizedBox.shrink(),
          ]),
          TableRow(
            children: [
              _buildInfoRow('Unit Name:', device.unit?.name ?? 'N/A'),
              _buildInfoRow('Room:', device.room?.name ?? 'N/A'),
            ],
          ),
          TableRow(
            children: [
              _buildInfoRow('Installation Date and Time:', '09/08/2024 13:30'),
              const SizedBox.shrink(),
            ],
          ),
          TableRow(
            children: [
              _buildInfoRow('Status:', 'Online', statusColor: Colors.green),
              _buildInfoRow('Last Offline Date and Time:', '-'),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(String title, String value, {Color? statusColor}) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 12,
              color: ColorsManager.lightGreyColor,
            ),
          ),
          const SizedBox(width: 10),
          Text(
            value,
            style: TextStyle(
              fontSize: 16,
              color: statusColor ?? Colors.black,
            ),
          ),
        ],
      ),
    );
  }

// ////// changing here for devices controls ////
//   Widget _buildStatusControls(List<Status> statuses) {
//     return GridView.builder(
//       padding: const EdgeInsets.symmetric(horizontal: 40),
//       shrinkWrap: true,
//       physics: const NeverScrollableScrollPhysics(),
//       gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//         crossAxisCount: 3,
//         mainAxisExtent: 133,
//         crossAxisSpacing: 12,
//         mainAxisSpacing: 12,
//       ),
//       itemCount: statuses.length,
//       itemBuilder: (context, index) {
//         final status = statuses[index];

//         return Container(
//           decoration: BoxDecoration(
//             borderRadius: BorderRadius.circular(20),
//             color: ColorsManager.greyColor.withOpacity(0.2),
//             border: Border.all(color: ColorsManager.boxDivider),
//           ),
//           padding: const EdgeInsets.all(16),
//           child: _buildControlForStatus(status),
//         );
//       },
//     );
//   }

  // Widget _buildControlForStatus(Status status) {
  //   switch (status.type) {
  //     case OperationDialogType.onOff:
  //       return Column(
  //         crossAxisAlignment: CrossAxisAlignment.start,
  //         children: [
  //           Row(
  //             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  //             crossAxisAlignment: CrossAxisAlignment.center,
  //             children: [
  //               if (status.icon.isNotEmpty)
  //                 ClipOval(
  //                     child: Container(
  //                   color: ColorsManager.whiteColors,
  //                   child: SvgPicture.asset(
  //                     status.icon,
  //                     width: 60,
  //                     height: 60,
  //                     fit: BoxFit.cover,
  //                   ),
  //                 )),
  //               SizedBox(
  //                 height: 20,
  //                 width: 35,
  //                 child: CupertinoSwitch(
  //                   value: status.value ?? false,
  //                   onChanged: (newValue) {
  //                     // Handle toggle change
  //                   },
  //                 ),
  //               ),
  //             ],
  //           ),
  //           const Spacer(),
  //           Center(
  //             child: Text(
  //               status.name,
  //               style: const TextStyle(
  //                 fontWeight: FontWeight.bold,
  //                 fontSize: 14,
  //               ),
  //             ),
  //           ),
  //         ],
  //       );
  //     case OperationDialogType.countdown:
  //       return Column(
  //         crossAxisAlignment: CrossAxisAlignment.start,
  //         children: [
  //           Center(
  //             child: Text(
  //               status.name,
  //               style: const TextStyle(
  //                 fontWeight: FontWeight.bold,
  //                 fontSize: 14,
  //               ),
  //             ),
  //           ),
  //           const Spacer(),
  //           IncrementDecrementWidget(
  //             value: status.value.toString(),
  //             description: 'hr',
  //             onIncrement: () {
  //               // Handle increment
  //             },
  //             onDecrement: () {
  //               // Handle decrement
  //             },
  //           ),
  //         ],
  //       );
  //     case OperationDialogType.integerSteps:
  //       return IncrementDecrementWidget(
  //         value: status.value.toString(),
  //         description: 'm',
  //         onIncrement: () {
  //           // Handle increment
  //         },
  //         onDecrement: () {
  //           // Handle decrement
  //         },
  //       );
  //     case OperationDialogType.listOfOptions:
  //       return Wrap(
  //         children: [
  //           ...status.options!.map((e) => ClipOval(
  //                 child: SvgPicture.asset(
  //                   e.icon,
  //                   width: 40,
  //                   height: 40,
  //                   fit: BoxFit.cover,
  //                 ),
  //               ))
  //         ],
  //       );

  //     default:
  //       return Column(
  //         crossAxisAlignment: CrossAxisAlignment.start,
  //         children: [
  //           if (status.icon.isNotEmpty)
  //             ClipOval(
  //                 child: Container(
  //               color: ColorsManager.whiteColors,
  //               child: SvgPicture.asset(
  //                 status.icon,
  //                 width: 60,
  //                 height: 60,
  //                 fit: BoxFit.cover,
  //               ),
  //             )),
  //           const Spacer(),
  //           Text(
  //             status.value.toString(),
  //             style: const TextStyle(
  //               fontSize: 14,
  //               color: Colors.black54,
  //             ),
  //           ),
  //         ],
  //       );
  //   }
  // }
}