import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';

class DropdownMenuContent extends StatefulWidget {
  final String? selectedSpaceId;
  final ValueChanged<String?> onChanged;
  final VoidCallback onClose;

  const DropdownMenuContent({
    super.key,
    required this.selectedSpaceId,
    required this.onChanged,
    required this.onClose,
  });

  @override
  State<DropdownMenuContent> createState() => _DropdownMenuContentState();
}

class _DropdownMenuContentState extends State<DropdownMenuContent> {
  final ScrollController _scrollController = ScrollController();
  final TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

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

  void _onScroll() {
    final bloc = context.read<SpaceTreeBloc>();
    final state = bloc.state;
    if (_scrollController.position.pixels >=
        _scrollController.position.maxScrollExtent - 30) {
      if (!state.paginationIsLoading) {
        bloc.add(PaginationEvent(state.paginationModel, state.communityList));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(maxHeight: 300),
      child: BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
        builder: (context, state) {
          final communities = state.searchQuery.isNotEmpty
              ? state.filteredCommunity
              : state.communityList;

          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Search bar
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  controller: _searchController,
                  onChanged: (query) {
                    context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
                  },
                  style: const TextStyle(fontSize: 14, color: Colors.black),
                  decoration: InputDecoration(
                    hintText: 'Search for space...',
                    prefixIcon: const Icon(Icons.search, size: 20),
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    isDense: true,
                  ),
                ),
              ),
              // Community list
              Expanded(
                child: ListView.builder(
                  controller: _scrollController,
                  itemCount:
                      communities.length + (state.paginationIsLoading ? 1 : 0),
                  itemBuilder: (context, index) {
                    if (index >= communities.length) {
                      return state.paginationIsLoading
                          ? const Padding(
                              padding: EdgeInsets.all(8.0),
                              child: Center(
                                child: SizedBox(
                                  width: 20,
                                  height: 20,
                                  child:
                                      CircularProgressIndicator(strokeWidth: 2),
                                ),
                              ),
                            )
                          : const SizedBox.shrink();
                    }

                    final community = communities[index];
                    final isSelected = community.uuid == widget.selectedSpaceId;

                    return ListTile(
                      title: Text(
                        community.name,
                        style: TextStyle(
                          color: isSelected ? Colors.blue : Colors.black,
                          fontWeight:
                              isSelected ? FontWeight.bold : FontWeight.normal,
                        ),
                      ),
                      onTap: () {
                        setState(() {
                          _searchController.clear();
                          _searchController.text.isEmpty
                              ? context
                                  .read<SpaceTreeBloc>()
                                  .add(const SearchQueryEvent(''))
                              : context.read<SpaceTreeBloc>().add(
                                  SearchQueryEvent(_searchController.text));
                        });
                        // Future.delayed(const Duration(seconds: 1), () {
                        widget.onChanged(community.uuid);
                        widget.onClose();
                        // });
                      },
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}