import 'package:flutter/material.dart';
import 'package:syncrow_web/core/extension/build_context_x.dart';
import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/pages/common/text_field/custom_text_field.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/utils/style.dart';

class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
  const DeviceManagementBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(30),
      height: context.screenHeight,
      width: context.screenWidth,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          FilterWidget(
            size: context.screenSize,
            tabs: ['All', 'Online', 'Offline', 'Low Battery'],
            selectedIndex: 0,
            onTabChanged: (index) {},
          ),
          const SizedBox(
            height: 20,
          ),
          if (isLargeScreenSize(context)) ...[
            Row(
              children: [
                const StatefulTextField(
                  title: "Community",
                  width: 200,
                  elevation: 2,
                ),
                const SizedBox(width: 20),
                const StatefulTextField(
                  title: "Unit Name",
                  width: 200,
                  elevation: 2,
                ),
                const SizedBox(width: 20),
                const StatefulTextField(
                  title: "Device Name / Product Name",
                  width: 300,
                  elevation: 2,
                ),
                const SizedBox(width: 20),
                SearchResetButtons(
                  onSearch: () {},
                  onReset: () {},
                ),
              ],
            ),
          ] else ...[
            Wrap(
              spacing: 20,
              runSpacing: 10,
              children: [
                const StatefulTextField(
                  title: "Community",
                  width: 200,
                  elevation: 2,
                ),
                const StatefulTextField(
                  title: "Unit Name",
                  width: 200,
                  elevation: 2,
                ),
                const StatefulTextField(
                  title: "Device Name / Product Name",
                  width: 300,
                  elevation: 2,
                ),
                SearchResetButtons(
                  onSearch: () {},
                  onReset: () {},
                ),
              ],
            ),
          ],
          const SizedBox(
            height: 12,
          ),
          Expanded(
              child: DynamicTable(
                  cellDecoration: containerDecoration,
                  selectAll: (p0) {
                    // visitorBloc.selectedDeviceIds.clear();
                    // for (var item in state.data) {
                    //   visitorBloc.add(SelectDeviceEvent(item.uuid));
                    // }
                  },
                  onRowCheckboxChanged: (index, isSelected) {
                    // final deviceId = state.data[index].uuid;
                    // visitorBloc.add(SelectDeviceEvent(deviceId));
                  },
                  withCheckBox: true,
                  size: context.screenSize,
                  headers: const [
                'Device Name',
                'Product Name',
                'Device ID',
                'Unit Name',
                'Room',
                'Battery Level',
                'Installation Date and Time',
                'Status',
                'Last Offline Date and Time',
              ],
                  data: []
                  // state.data.map((item) {
                  //   return [
                  //     item.name.toString(),
                  //     item.uuid.toString(),
                  //     item.productType.toString(),
                  //     '',
                  //     item.online.value.toString(),
                  //   ];
                  // }).toList(),
                  )),
        ],
      ),
    );
  }
}