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/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';

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: () {},
                ),
              ],
            ),
          ],
        ],
      ),
    );
  }
}