import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart'; class DraggableCard extends StatelessWidget { const DraggableCard({ super.key, required this.imagePath, required this.title, this.titleColor, this.isDragged = false, this.isDisabled = false, this.deviceData, }); final String imagePath; final String title; final Color? titleColor; final bool isDragged; final bool isDisabled; final Map? deviceData; @override Widget build(BuildContext context) { Widget card = Draggable>( data: deviceData ?? { 'key': UniqueKey().toString(), 'imagePath': imagePath, 'title': title, }, feedback: Transform.rotate( angle: -0.1, child: _buildCardContent(context), ), childWhenDragging: _buildGreyContainer(), child: _buildCardContent(context), ); if (isDisabled) { card = AbsorbPointer(child: card); } return card; } Widget _buildCardContent(BuildContext context) { return BlocBuilder( builder: (context, state) { // Filter functions for this device final deviceFunctions = state.selectedFunctions .where((f) => f.entityId == deviceData?['deviceId']) .toList(); return Card( color: ColorsManager.whiteColors, child: SizedBox( width: 90, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( height: 123, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 50, width: 50, decoration: BoxDecoration( color: ColorsManager.CircleImageBackground, borderRadius: BorderRadius.circular(90), border: Border.all( color: ColorsManager.graysColor, ), ), padding: const EdgeInsets.all(8), child: imagePath.contains('.svg') ? SvgPicture.asset( imagePath, ) : Image.network(imagePath), ), const SizedBox(height: 8), Padding( padding: const EdgeInsets.symmetric(horizontal: 3), child: Text( title, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, maxLines: 2, style: context.textTheme.bodySmall?.copyWith( color: titleColor ?? ColorsManager.blackColor, fontSize: 12, ), ), ), ], ), ), if (deviceFunctions.isNotEmpty) ...[ const Divider(height: 1), ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4), itemCount: deviceFunctions.length, itemBuilder: (context, index) { final function = deviceFunctions[index]; return Row( mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Text( '${function.operationName}: ${function.valueDescription}', style: context.textTheme.bodySmall?.copyWith( fontSize: 9, color: ColorsManager.textGray, height: 1.2, ), overflow: TextOverflow.ellipsis, ), ), InkWell( onTap: () { context.read().add( RemoveFunction(function), ); }, child: const Padding( padding: EdgeInsets.all(2), child: Icon( Icons.close, size: 12, color: ColorsManager.textGray, ), ), ), ], ); }, ), ], ], ), ), ); }, ); } Widget _buildGreyContainer() { return Container( height: 123, width: 90, decoration: BoxDecoration( color: Colors.grey[100], borderRadius: BorderRadius.circular(20), ), ); } }