import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_web/pages/routines/create_new_routines/dropdown_menu_content.dart'; import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart'; import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class SpaceTreeDropdown extends StatefulWidget { final String? selectedSpaceId; final Function(String?)? onChanged; const SpaceTreeDropdown({ super.key, this.selectedSpaceId, this.onChanged, }); @override State createState() => _SpaceTreeDropdownState(); } class _SpaceTreeDropdownState extends State { late String? _selectedSpaceId; final LayerLink _layerLink = LayerLink(); OverlayEntry? _overlayEntry; @override void initState() { super.initState(); _selectedSpaceId = widget.selectedSpaceId; } @override void dispose() { _removeOverlay(); super.dispose(); } void _removeOverlay() { _overlayEntry?.remove(); _overlayEntry = null; } @override Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { final communities = state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList; final selectedCommunity = _findCommunity(communities, _selectedSpaceId); return CompositedTransformTarget( link: _layerLink, child: GestureDetector( onTap: _toggleDropdown, child: Container( height: 46, decoration: BoxDecoration( border: Border.all(color: Colors.grey.shade300), borderRadius: BorderRadius.circular(12), ), margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 8), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 12), child: Text( selectedCommunity?.name ?? 'Select a space', style: TextStyle( color: selectedCommunity != null ? Colors.black : Colors.grey, overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w400, fontSize: 15, ), ), ), Container( decoration: BoxDecoration( color: Colors.grey[200], borderRadius: const BorderRadius.only( topRight: Radius.circular(10), bottomRight: Radius.circular(10), ), ), height: 45, width: 35, child: const Icon( Icons.keyboard_arrow_down, color: ColorsManager.textGray, ), ), ], ), ), ), ); }, ); } void _toggleDropdown() { if (_overlayEntry != null) { _removeOverlay(); return; } _overlayEntry = OverlayEntry( builder: (context) => Positioned( width: 300, child: CompositedTransformFollower( link: _layerLink, showWhenUnlinked: false, offset: const Offset(0, 48), child: Material( elevation: 8, borderRadius: BorderRadius.circular(12), child: DropdownMenuContent( selectedSpaceId: _selectedSpaceId, onChanged: (id) { if (id != null && mounted) { setState(() => _selectedSpaceId = id); widget.onChanged?.call(id); _removeOverlay(); } }, onClose: _removeOverlay, ), ), ), ), ); Overlay.of(context).insert(_overlayEntry!); } CommunityModel? _findCommunity( List communities, String? communityId) { if (communityId == null) return null; try { return communities.firstWhere((c) => c.uuid == communityId); } catch (e) { return CommunityModel( uuid: '', createdAt: DateTime.now(), updatedAt: DateTime.now(), name: '', description: '', spaces: []); } } }