import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/bloc/space_management_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/create_community_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class BlankCommunityWidget extends StatelessWidget {
  const BlankCommunityWidget({Key? key}) : super(key: key);

  @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: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 400, // Each item's width will be 400 or less
            mainAxisSpacing: 10, // Spacing between items
            crossAxisSpacing: 10, // Spacing between items
            childAspectRatio: 2.0, // Aspect ratio for width:height (e.g., 300:150 = 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: [
                    Container(
                      width: 400, // Explicitly set item width
                      height: 150, // Item height
                      decoration: ShapeDecoration(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(
                            width: 4,
                            strokeAlign: BorderSide.strokeAlignOutside,
                            color: ColorsManager.borderColor,
                          ),
                          borderRadius: BorderRadius.circular(5),
                        ),
                      ),
                    ),
                    const SizedBox(height: 9), // Space between item and text
                    Text('Blank', // Text below the item
                        style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                              color: ColorsManager.blackColor,
                            )),
                  ],
                ));
          },
        ),
      ),
    );
  }

  void _showCreateCommunityDialog(BuildContext parentContext) {
    showDialog(
      context: parentContext,
      builder: (context) => CreateCommunityDialog(
        onCreateCommunity: (String communityName, String description) {
          parentContext.read<SpaceManagementBloc>().add(
                CreateCommunityEvent(
                  name: communityName,
                  description: description,
                ),
              );
        },
      ),
    );
  }
}