import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/common/search_bar.dart';
import 'package:syncrow_web/pages/spaces_management/view/community_tile.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/style.dart';

class SidebarWidget extends StatefulWidget {
  final Function(String)? onCommunitySelected;

  SidebarWidget({this.onCommunitySelected});

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

class _SidebarWidgetState extends State<SidebarWidget> {
  String? _expandedTile;

  // A helper method to handle the expansion logic for CustomExpansionTile
  void _handleExpansionChange(String title, bool expanded) {
    setState(() {
      _expandedTile = expanded ? title : null;
    });
    widget.onCommunitySelected?.call(title);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      decoration: subSectionContainerDecoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Communities title with the add button
          Container(
            decoration: subSectionContainerDecoration,
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Communities',
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                GestureDetector(
                  onTap: () {
                    // Handle add button action
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    decoration: const BoxDecoration(
                      color: ColorsManager.whiteColors,
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: SvgPicture.asset(
                        Assets.roundedAddIcon,
                        width: 24,
                        height: 24,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // Search bar
          const CustomSearchBar(),
          const SizedBox(height: 16),
          // Community list with one item expanded at a time
          Expanded(
            child: ListView(
              children: [
                CommunityTile(
                  title: "Downtown Dubai",
                  expandedTile: _expandedTile ?? '',
                  onExpansionChanged: _handleExpansionChange,
                ),
                CommunityTile(
                  title: 'Dubai Creek Harbour',
                  expandedTile: _expandedTile ?? '',
                  onExpansionChanged: _handleExpansionChange,
                ),
                CommunityTile(
                  title: 'Dubai Hills Estate',
                  expandedTile: _expandedTile ?? '',
                  onExpansionChanged: _handleExpansionChange,
                  children: [
                    CommunityTile(
                      title: 'South Side',
                      expandedTile: _expandedTile ?? '',
                      onExpansionChanged: _handleExpansionChange,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}