import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/pages/common/buttons/add_space_button.dart'; import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class SpaceManagementPage extends StatefulWidget { @override SpaceManagementPageState createState() => SpaceManagementPageState(); } class SpaceManagementPageState extends State { // Store created spaces List spaces = []; @override Widget build(BuildContext context) { Size screenSize = MediaQuery.of(context).size; return Scaffold( backgroundColor: ColorsManager.whiteColors, appBar: AppBar( title: const Text('Space Management'), ), body: Stack( children: [ Center( child: spaces.isEmpty ? AddSpaceButton( onTap: () { _showCreateSpaceDialog(screenSize); }, ) : Stack( children: spaces .asMap() .entries .map((entry) => _buildSpaceCard(entry.key, screenSize)) .toList(), ), ), ], ), ); } // Function to open the Create Space dialog void _showCreateSpaceDialog(Size screenSize, {Offset? position}) { showDialog( context: context, builder: (BuildContext context) { return CreateSpaceDialog( onCreateSpace: (String name, String icon) { setState(() { // Set the first space in the center or use passed position Offset centerPosition = position ?? Offset( screenSize.width / 2 - 75, // Center horizontally screenSize.height / 2 - 100, // Slightly above the center vertically ); spaces.add(SpaceData(name: name, icon: icon, position: centerPosition)); }); }, ); }, ); } // Function to build a draggable space card Widget _buildSpaceCard(int index, Size screenSize) { return Positioned( left: spaces[index].position.dx, top: spaces[index].position.dy, child: GestureDetector( onPanUpdate: (details) { // Update the position of the space card while dragging setState(() { spaces[index].position += details.delta; }); }, child: MouseRegion( onEnter: (_) { // Show plus buttons on hover setState(() { spaces[index].isHovered = true; }); }, onExit: (_) { // Hide plus buttons when not hovered setState(() { spaces[index].isHovered = false; }); }, child: Stack( clipBehavior: Clip.none, children: [ _buildSpaceContainer(index), if (spaces[index].isHovered) ...[ _buildPlusButton(index, 'left', const Offset(-21, 20), screenSize), _buildPlusButton(index, 'right', const Offset(140, 20), screenSize), _buildPlusButton(index, 'down', const Offset(63, 55), screenSize), ], ], ), ), ), ); } // Function to build the space container with the styled format Widget _buildSpaceContainer(int index) { return Container( width: 150, height: 60, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: const Offset(0, 3), ), ], ), child: Row( children: [ Container( width: 40, height: 60, decoration: const BoxDecoration( color: Color(0xFF023DFE), borderRadius: BorderRadius.only( topLeft: Radius.circular(15), bottomLeft: Radius.circular(15), ), ), child: Center( child: SvgPicture.asset(spaces[index].icon, width: 24, height: 24, color: Colors.white), ), ), const SizedBox(width: 10), Text( spaces[index].name, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ], ), ); } // Function to build plus buttons for new space creation Widget _buildPlusButton(int index, String direction, Offset offset, Size screenSize) { return Positioned( left: offset.dx, top: offset.dy, child: GestureDetector( onTap: () { Offset newPosition; switch (direction) { case 'left': newPosition = spaces[index].position + const Offset(-200, 0); break; case 'right': newPosition = spaces[index].position + const Offset(200, 0); break; case 'down': newPosition = spaces[index].position + const Offset(0, 150); break; default: newPosition = spaces[index].position; } _showCreateSpaceDialog(screenSize, position: newPosition); }, child: Container( width: 30, height: 30, decoration: const BoxDecoration( color: Color(0xFF023DFE), shape: BoxShape.circle, ), child: const Icon(Icons.add, color: Colors.white, size: 20), ), ), ); } } // Model for storing space information class SpaceData { final String name; final String icon; Offset position; bool isHovered; SpaceData({required this.name, required this.icon, required this.position, this.isHovered = false}); }