syncrow-web/lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart

import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class CreateCommunityDialog extends StatefulWidget {
  final Function(String name, String description) onCreateCommunity;
  final List<CommunityModel> communities;

  const CreateCommunityDialog(
      {super.key, required this.onCreateCommunity, required this.communities});

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

class CreateCommunityDialogState extends State<CreateCommunityDialog> {
  String enteredName = '';
  bool isNameFieldExist = false;
  bool isNameEmpty = false;

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      backgroundColor:
          ColorsManager.transparentColor, // Transparent for shadow effect
      child: Stack(
        children: [
          // Background container with shadow and rounded corners
          Container(
            width: screenWidth * 0.3,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: ColorsManager.whiteColors,
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                  color: ColorsManager.blackColor.withOpacity(0.25),
                  blurRadius: 20,
                  spreadRadius: 5,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Community Name',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 16),
                // Input field for the community name
                TextField(
                  onChanged: (value) {
                    setState(() {
                      enteredName = value.trim();
                      isNameFieldExist = widget.communities.any(
                        (community) => community.name == enteredName,
                      );
                      if (value.isEmpty) {
                        isNameEmpty = true;
                      } else {
                        isNameEmpty = false;
                      }
                    });
                  },
                  style: const TextStyle(
                    color: ColorsManager.blackColor,
                  ),
                  decoration: InputDecoration(
                    hintText: 'Please enter the community name',
                    filled: true,
                    fillColor: ColorsManager.boxColor,
                    hintStyle: const TextStyle(
                      fontSize: 14,
                      color: ColorsManager.grayBorder,
                      fontWeight: FontWeight.w400,
                    ),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: isNameFieldExist || isNameEmpty
                              ? ColorsManager.red
                              : ColorsManager.boxColor,
                          width: 1),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: isNameFieldExist || isNameEmpty
                              ? ColorsManager.red
                              : ColorsManager.boxColor, width: 1),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide(
                          color: isNameFieldExist || isNameEmpty
                              ? ColorsManager.red
                              : ColorsManager.boxColor,
                          width: 1),
                    ),
                  ),
                ),
                if (isNameFieldExist)
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      '*Name already exists.',
                      style: Theme.of(context)
                          .textTheme
                          .bodySmall
                          ?.copyWith(color: ColorsManager.red),
                    ),
                  ),
                if (isNameEmpty)
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      '*Name should not be empty.',
                      style: Theme.of(context)
                          .textTheme
                          .bodySmall
                          ?.copyWith(color: ColorsManager.red),
                    ),
                  ),
                const SizedBox(height: 24),
                // Action buttons
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: CancelButton(
                        label: 'Cancel',
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: DefaultButton(
                        onPressed: () {
                          if (enteredName.isNotEmpty && !isNameFieldExist) {
                            widget.onCreateCommunity(
                              enteredName,
                              "",
                            );
                            Navigator.of(context).pop();
                          }
                        },
                        backgroundColor: isNameFieldExist || isNameEmpty
                            ? ColorsManager.lightGrayColor
                            : ColorsManager.secondaryColor,
                        borderRadius: 10,
                        foregroundColor: ColorsManager.whiteColors,
                        child: const Text('OK'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}