import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/application/common/str_extensions.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/data/models/staff/pivot.dart';
import 'package:krow/core/entity/event_entity.dart';
import 'package:krow/core/entity/staff_contact_entity.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/staff_contact_info_popup.dart';

class AssignedStaffItemWidget extends StatelessWidget {
  final StaffContact staffContact;
  final String department;

  const AssignedStaffItemWidget(
      {super.key, required this.staffContact, required this.department});

  @override
  Widget build(BuildContext context) {
    var showRating =
        staffContact.parentPosition?.parentShift?.parentEvent?.status ==
            EventStatus.completed;
    return GestureDetector(
      onTap: () {
        StaffContactInfoPopup.show(context, staffContact, department);
      },
      child: Container(
        height: 62,
        padding: const EdgeInsets.all(12),
        margin: const EdgeInsets.only(bottom: 8),
        decoration: KwBoxDecorations.white8,
        child: Row(
          mainAxisAlignment: showRating
              ? MainAxisAlignment.spaceBetween
              : MainAxisAlignment.start,
          children: [
            Flexible(
              child: Row(
                children: [
                  CachedNetworkImage(
                      useOldImageOnUrlChange: true,
                      fadeOutDuration: Duration.zero,
                      placeholderFadeInDuration: Duration.zero,
                      fadeInDuration: Duration.zero,
                      imageUrl: staffContact.photoUrl ?? '',
                      imageBuilder: (context, imageProvider) => Container(
                            width: 36,
                            height: 36,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              image: DecorationImage(
                                image: imageProvider,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error)),
                  const Gap(12),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${staffContact.firstName} ${staffContact.lastName}',
                          overflow: TextOverflow.ellipsis,
                          style: AppTextStyles.bodyMediumMed,
                        ),
                        const Gap(4),
                        Text(
                          staffContact.phoneNumber ?? '',
                          style: AppTextStyles.bodySmallReg
                              .copyWith(color: AppColors.blackGray),
                        ),
                      ],
                    ),
                  ),
                  const Gap(8),
                ],
              ),
            ),
            showRating ? _buildRating(context) : buildStatus()
          ],
        ),
      ),
    );
  }

  Widget _buildRating(BuildContext context) {
    return ValueListenableBuilder<double>(
        valueListenable: staffContact.rating,
        builder: (context, rating, child) {
          return rating == 0
              ? GestureDetector(
                  onTap: () {
                    context.pushRoute(RateStaffRoute(
                      staff: staffContact,
                    ));
                  },
                  child: Container(
                    height: 36,
                    alignment: Alignment.center,
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    decoration: BoxDecoration(
                      color: AppColors.tintBlue,
                      borderRadius: BorderRadius.circular(56),
                      border: Border.all(
                          color: AppColors.tintDropDownButton, width: 1),
                    ),
                    child: Text('Rate',
                        style: AppTextStyles.bodyMediumMed
                            .copyWith(color: AppColors.primaryBlue)),
                  ),
                )
              : Container(
                  height: 36,
                  alignment: Alignment.topRight,
                  child: Row(
                    children: [
                      Assets.images.icons.ratingStar.star
                          .svg(height: 16, width: 16),
                      Gap(4),
                      Text(rating.toStringAsFixed(1),
                          style: AppTextStyles.bodyMediumMed),
                    ],
                  ),
                );
        });
  }

  SizedBox buildStatus() {
    return SizedBox(
      height: 40,
      child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
          decoration: BoxDecoration(
            border: Border.all(
              color: staffContact.status.getStatusBorderColor(),
            ),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Row(
            children: [
              Container(
                width: 6,
                height: 6,
                padding: const EdgeInsets.all(3),
                decoration: BoxDecoration(
                  color: staffContact.status.getStatusTextColor(),
                  borderRadius: BorderRadius.circular(3),
                ),
              ),
              const Gap(2),
              Text(
                staffContact.status.formattedName.capitalize(),
                style: AppTextStyles.bodyTinyMed
                    .copyWith(color: staffContact.status.getStatusTextColor()),
              )
            ],
          ),
        ),
      ),
    );
  }
}
