import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:web_panel/utils/App_color.dart';
import 'package:web_panel/utils/spacing.dart';

import '../../controllers/device_info_controller.dart';
import '../../responsive.dart';
import '../../widget/app_drop_down.dart';
import '../dashboard/components/header.dart';
import '../dashboard/components/search_field.dart';
import 'device_info.dart';

class Device extends StatelessWidget {
  const Device({super.key, required this.scaffoldKey});

  final GlobalKey<ScaffoldState> scaffoldKey;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SelectableRegion(
          focusNode: FocusNode(),
          selectionControls: materialTextSelectionControls,
          child: SingleChildScrollView(
            primary: false,
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Spacing.height(3),

                GetBuilder<DeviceInfoController>(
                  init: DeviceInfoController(),
                  builder: (controller) {
                    return Header(
                      title: 'Device management',
                      scaffoldKey: scaffoldKey,
                      onChanged: (value) {
                        controller.updateSearch(value);
                      },
                    );
                  },
                ),

                // if (!Responsive.isMobile(context))
                //   Text(
                //     "Device management",
                //     style: Theme.of(context).textTheme.titleLarge,
                //   ),
                Spacing.height(1),
                if (!Responsive.isMobile(context))
                  Text(
                    "Manage and monitor your connected devices",
                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
                      color: AppColor.lightText,
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                Spacing.height(3),
                Divider(color: Color(0xff374151), height: 1.sp),
                Spacing.height(4),
                if (!Responsive.isMobile(context))
                  Align(
                    alignment: Alignment.centerRight,
                    child: SizedBox(
                      width: 300,
                      child: GetBuilder<DeviceInfoController>(
                        init: DeviceInfoController(),
                        builder: (controller) {
                          return SearchField(
                            onChanged: (value) {
                              controller.updateSearch(value);
                            },
                          );
                        },
                      ),
                    ),
                  ),
                Spacing.height(4),

                DeviceInfo(),
                Spacing.height(4),

                GetX<DeviceInfoController>(
                  init: DeviceInfoController(),
                  builder: (controller) {
                    return Row(
                      // spacing: 8,
                      children: [
                        AppDropDown(
                          selectedValue: controller.showRecordCountValue,
                          optionList: controller.showRecordCountList,
                          width: 110,
                          onSelected: (val) {
                            controller.showRecordCountValue(val);
                            final count = int.parse(
                              controller.showRecordCountValue.split(":")[1],
                            );

                            controller.pageSize(count);
                            controller.updatePaginatedList();
                            // controller.fetchPage(limit: count, reset: true);
                          },
                        ),

                        Spacer(),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            // ElevatedButton(
                            //   onPressed: controller.previousPage,
                            //   child: const Text('Previous'),
                            // ),
                            GestureDetector(
                              onTap: () {
                                controller.previousPage();
                              },
                              child: Container(
                                width: 30,
                                height: 30,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: (controller.currentPage.value > 1)
                                      ? AppColor.secondaryColor
                                      : AppColor.secondaryColor.withValues(
                                          alpha: 0.6,
                                        ),
                                  borderRadius: BorderRadius.circular(4),
                                  // border: Border.all(color: Colors.grey.shade700),
                                ),

                                child: Icon(
                                  Icons.arrow_back_ios,
                                  size: 16,
                                  color: (controller.currentPage.value > 1)
                                      ? Colors.white
                                      : Colors.white.withValues(alpha: 0.4),
                                ),
                              ),
                            ),
                            const SizedBox(width: 10),
                            Text('Page ${controller.currentPage}'),
                            const SizedBox(width: 10),
                            // ElevatedButton(
                            //   onPressed: controller.nextPage,
                            //   child: const Text('Next'),
                            // ),
                            GestureDetector(
                              onTap: () {
                                controller.nextPage();
                              },
                              child: Container(
                                width: 30,
                                height: 30,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color:
                                      ((controller.currentPage.value *
                                              controller.pageSize.value) <
                                          controller.filteredList.length)
                                      ? AppColor.secondaryColor.withValues(
                                          alpha: 0.6,
                                        )
                                      : AppColor.secondaryColor,
                                  borderRadius: BorderRadius.circular(4),
                                  // border: Border.all(color: Colors.grey.shade700),
                                ),
                                child: Icon(
                                  Icons.arrow_forward_ios_outlined,
                                  size: 16,
                                  color:
                                      ((controller.currentPage.value *
                                              controller.pageSize.value) <
                                          controller.filteredList.length)
                                      ? Colors.white
                                      : Colors.white.withValues(alpha: 0.4),
                                ),
                              ),
                            ),
                          ],
                        ),
                        // GestureDetector(
                        //   onTap: () {
                        //     controller.previousPage();
                        //   },
                        //   child: Container(
                        //     width: 30,
                        //     height: 30,
                        //     alignment: Alignment.center,
                        //     decoration: BoxDecoration(
                        //       color: AppColor.secondaryColor,
                        //       borderRadius: BorderRadius.circular(4),
                        //       // border: Border.all(color: Colors.grey.shade700),
                        //     ),
                        //
                        //     child: Icon(
                        //       Icons.arrow_back_ios,
                        //       size: 12,
                        //       color: Colors.white,
                        //     ),
                        //   ),
                        // ),
                        // Spacing.width(1),
                        // SizedBox(
                        //   width: 200,
                        //   height: 30,
                        //   child: ListView.builder(
                        //     itemCount: 5,
                        //     shrinkWrap: true,
                        //
                        //     scrollDirection: Axis.horizontal,
                        //     physics: NeverScrollableScrollPhysics(),
                        //     itemBuilder: (context, index) {
                        //       return GestureDetector(
                        //         onTap: () {
                        //           controller.changePage(
                        //             controller.firstPage + index,
                        //           );
                        //         },
                        //         child: Container(
                        //           margin: EdgeInsets.symmetric(horizontal: 5),
                        //           width: 30,
                        //           height: 30,
                        //           alignment: Alignment.center,
                        //           decoration: BoxDecoration(
                        //             color: AppColor.secondaryColor,
                        //             borderRadius: BorderRadius.circular(4),
                        //             // border: Border.all(color: Colors.grey.shade700),
                        //           ),
                        //           child: Text(
                        //             index == 3
                        //                 ? '...'
                        //                 : index == 4
                        //                 ? '${controller.lastPage}'
                        //                 : '${controller.firstPage + index}',
                        //             style: Theme.of(context).textTheme.labelLarge
                        //                 ?.copyWith(
                        //                   color:
                        //                       controller.firstPage + index ==
                        //                           controller.currentPage
                        //                       ? AppColor.primaryColor
                        //                       : Colors.white,
                        //                 ),
                        //           ),
                        //         ),
                        //       );
                        //     },
                        //   ),
                        // ),
                        // Spacing.width(1),
                        // GestureDetector(
                        //   onTap: () {
                        //     controller.nextPage();
                        //   },
                        //   child: Container(
                        //     width: 30,
                        //     height: 30,
                        //     alignment: Alignment.center,
                        //     decoration: BoxDecoration(
                        //       color: AppColor.secondaryColor,
                        //       borderRadius: BorderRadius.circular(4),
                        //       // border: Border.all(color: Colors.grey.shade700),
                        //     ),
                        //     child: Icon(
                        //       Icons.arrow_forward_ios_outlined,
                        //       size: 12,
                        //       color: Colors.white,
                        //     ),
                        //   ),
                        // ),
                      ],
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
