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

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.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<String, dynamic>? deviceData;

  @override
  Widget build(BuildContext context) {
    Widget card = Draggable<Map<String, dynamic>>(
      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 Card(
      color: ColorsManager.whiteColors,
      child: SizedBox(
        height: 123,
        width: 90,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildGreyContainer() {
    return Container(
      height: 123,
      width: 90,
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(20),
      ),
    );
  }
}