import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/model/room_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/room_page_switch.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class RoomPage extends StatefulWidget {
  const RoomPage({super.key, required this.room});

  final RoomModel room;

  @override
  _RoomPageState createState() => _RoomPageState();
}

class _RoomPageState extends State<RoomPage> {
  final TextEditingController _searchController = TextEditingController();
  List<dynamic> _filteredDevices = [];

  @override
  void initState() {
    super.initState();
    _filteredDevices = widget.room.devices ?? [];
    _searchController.addListener(_filterDevices);
  }

  @override
  void dispose() {
    _searchController.removeListener(_filterDevices);
    _searchController.dispose();
    super.dispose();
  }

  void _filterDevices() {
    final query = _searchController.text.toLowerCase();
    setState(() {
      _filteredDevices = widget.room.devices!
          .where((device) => device.type!.toLowerCase().contains(query))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (widget.room.devices!.isNotEmpty)
          TextFormField(
            controller: _searchController,
            decoration: InputDecoration(
              hintText: 'Search',
              hintStyle: const TextStyle(
                  color: ColorsManager.textGray,
                  fontSize: 16,
                  fontWeight: FontWeight.w400),
              prefixIcon: Container(
                padding: const EdgeInsets.all(5.0),
                margin: const EdgeInsets.all(10.0),
                child: SvgPicture.asset(
                  Assets.searchIcon,
                  fit: BoxFit.contain,
                ),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
          ),
        _filteredDevices.isNotEmpty
            ? Expanded(
                child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    childAspectRatio: 1.5,
                  ),
                  padding: const EdgeInsets.only(top: 10),
                  itemCount: _filteredDevices.length,
                  itemBuilder: (context, index) {
                    return RoomPageSwitch(device: _filteredDevices[index]);
                  },
                ),
              )
            : widget.room.devices!.isNotEmpty
                ? const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Center(
                            child: Text(
                          'No Results Found',
                          style: TextStyle(
                              color: ColorsManager.grayColor,
                              fontSize: 14,
                              fontWeight: FontWeight.w400),
                        )),
                      ],
                    ),
                  )
                : const SizedBox(),
      ],
    );
  }
}