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/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: Container(
        padding: const EdgeInsets.all(8),
        width: 90,
        height: deviceFunctions.isEmpty ? 123 : null,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            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),
              ...deviceFunctions.map((function) => Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Expanded(
                        child: Text(
                          '${function.operationName}: ${function.value}',
                          style: context.textTheme.bodySmall?.copyWith(
                            fontSize: 9,
                            color: ColorsManager.textGray,
                            height: 1.2,
                          ),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  )),
          ],
        ),
      ),
    );
  }

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