syncrow-web/lib/pages/routiens/widgets/dragable_card.dart

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/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class DraggableCard extends StatelessWidget {
  final String imagePath;
  final String title;
  final Map<String, dynamic> deviceData;

  const DraggableCard({
    super.key,
    required this.imagePath,
    required this.title,
    required this.deviceData,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<RoutineBloc, RoutineState>(
      builder: (context, state) {
        final deviceFunctions = state.selectedFunctions
            .where((f) => f.entityId == deviceData['deviceId'])
            .toList();

        return Draggable<Map<String, dynamic>>(
          data: deviceData,
          feedback: Transform.rotate(
            angle: -0.1,
            child: _buildCardContent(context, deviceFunctions),
          ),
          childWhenDragging: _buildGreyContainer(),
          child: _buildCardContent(context, deviceFunctions),
        );
      },
    );
  }

  Widget _buildCardContent(
      BuildContext context, List<DeviceFunctionData> deviceFunctions) {
    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: 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<RoutineBloc>().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),
      ),
    );
  }
}