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<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 BlocBuilder<RoutineBloc, RoutineState>(
      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<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),
      ),
    );
  }
}