import 'package:flutter/material.dart';
import 'package:prosapp_web_app/models/usuario_profesional.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/ui/labels/custom_labels.dart';
import 'package:provider/provider.dart';
import 'package:prosapp_web_app/providers/professionals_provider.dart';
import 'package:prosapp_web_app/ui/cards/white_card.dart';

class ProfessionalsView extends StatelessWidget {
  const ProfessionalsView({super.key});

  @override
  Widget build(BuildContext context) {
    final professionalsProvider = Provider.of<ProfessionalsProvider>(context);

    return LayoutBuilder(
      builder: (context, constraints) {
        int crossAxisCount;
        double childAspectRatio;

        if (constraints.maxWidth >= 1540) {
          crossAxisCount = 5;
          childAspectRatio = 0.75;
        } else if (constraints.maxWidth >= 1000) {
          crossAxisCount = 4;
          childAspectRatio = 0.65;
        } else if (constraints.maxWidth >= 650) {
          crossAxisCount = 3;
          childAspectRatio = 0.55;
        } else if (constraints.maxWidth >= 400) {
          crossAxisCount = 2;
          childAspectRatio = 0.55;
        } else {
          crossAxisCount = 1;
          childAspectRatio = 0.7;
        }

        if (professionalsProvider.isLoading) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }

        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            childAspectRatio: childAspectRatio,
          ),
          itemCount: professionalsProvider.professionals.length,
          itemBuilder: (context, index) {
            UsuarioProfesional data = professionalsProvider.professionals[index];

            final image = (data.user.picture == '' || data.user.picture == null)
                ? const Image(image: AssetImage('no-image.jpg'))
                : FadeInImage.assetNetwork(
                    placeholder: 'loader.gif',
                    fit: BoxFit.cover,
                    image: data.user.picture!,
                  );

            return MouseRegion(
              cursor: SystemMouseCursors.click,
              child: GestureDetector(
                onTap: () async {
                  final List<dynamic> result = await NavigationService.navigateToFuture('/dashboard/calendar/${data.user.id}');

                  DateTime day = result[0];
                  TimeOfDay time = result[1];

                  Navigator.pop(context, [data, day, time]);
                },
                child: WhiteCard(
                  title: data.user.name.toUpperCase(),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const Icon(
                            Icons.star,
                            size: 15,
                            color: Colors.yellow,
                          ),
                          const SizedBox(width: 3),
                          Text(
                            data.averageScore.toString(),
                            style: CustomLabels.h4,
                          ),
                        ],
                      ),
                      Center(
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: ClipOval(
                            child: image,
                          ),
                        ),
                      ),
                      const SizedBox(height: 10),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            const SizedBox(height: 5),
                            Row(
                              children: [
                                const Icon(Icons.location_on_outlined,
                                    size: 15),
                                const SizedBox(width: 2),
                                Text(
                                  data.user.city ?? '',
                                  textAlign: TextAlign.center,
                                ),
                              ],
                            ),
                            Row(
                              children: [
                                const Icon(Icons.work_outline, size: 15),
                                const SizedBox(width: 5),
                                Text(data.professionalInfo.profession),
                              ],
                            ),
                            const Divider(),
                            if (data.professionalInfo.paymentMethods.datafono ||
                                data.professionalInfo.paymentMethods.nequi ||
                                data.professionalInfo.paymentMethods
                                    .transferencia) ...[
                              const Row(
                                children: [
                                  Icon(Icons.payment_outlined, size: 15),
                                  SizedBox(width: 5),
                                  Text('Metodos de pago'),
                                ],
                              ),
                              Visibility(
                                visible: data
                                    .professionalInfo.paymentMethods.datafono,
                                child: const Text('- Datafono'),
                              ),
                              Visibility(
                                visible:
                                    data.professionalInfo.paymentMethods.nequi,
                                child: const Text('- Nequi'),
                              ),
                              Visibility(
                                visible: data.professionalInfo.paymentMethods
                                    .transferencia,
                                child: const Text('- Transferencia'),
                              ),
                            ] else
                              const Text(
                                'No hay metodos de pago registrados',
                                style: TextStyle(
                                  fontSize: 14,
                                  color: Colors.black45,
                                ),
                              ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }
}