import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
import 'package:syncrow_web/pages/spaces_management/create_community/view/create_community_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class BlankCommunityWidget extends StatefulWidget {
  final List<CommunityModel> communities;

  BlankCommunityWidget({required this.communities});

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

class _BlankCommunityWidgetState extends State<BlankCommunityWidget> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color:
            ColorsManager.whiteColors, // Parent container with white background
        child: GridView.builder(
          padding: const EdgeInsets.only(left: 40.0, top: 20.0),
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 400,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 2.0,
          ),
          itemCount: 1, // Only one item
          itemBuilder: (context, index) {
            return GestureDetector(
                onTap: () => _showCreateCommunityDialog(context),
                child: Column(
                  crossAxisAlignment:
                      CrossAxisAlignment.center, // Center align the content
                  children: [
                    Expanded(
                      child: AspectRatio(
                        aspectRatio: 2.0,
                        child: Container(
                          decoration: ShapeDecoration(
                            shape: RoundedRectangleBorder(
                              side: const BorderSide(
                                width: 4,
                                strokeAlign: BorderSide.strokeAlignOutside,
                                color: ColorsManager.borderColor,
                              ),
                              borderRadius: BorderRadius.circular(5),
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 9),
                    Text('Blank',
                        style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                              color: ColorsManager.blackColor,
                            )),
                  ],
                ));
          },
        ),
      ),
    );
  }

  void _showCreateCommunityDialog(BuildContext parentContext) {
    showDialog(
      context: parentContext,
      builder: (context) => CreateCommunityDialog(
        isEditMode: false,
        existingCommunityNames:
            widget.communities.map((community) => community.name).toList(),
        onCreateCommunity: (String communityName, String description) {
          parentContext.read<SpaceManagementBloc>().add(
                CreateCommunityEvent(communityName, description, context),
              );
        },
      ),
    );
  }
}
