import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart' show Gap;
import 'package:intl/intl.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/features/notificatins/domain/notification_entity.dart';

import '../../../../core/presentation/gen/assets.gen.dart';
import '../../../../core/presentation/styles/theme.dart';

class NotificationListItem extends StatelessWidget {
  final NotificationEntity notification;

  NotificationListItem({required this.notification})
      : super(key: Key(notification.id));

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 4.0, bottom: 4.0),
      child: GestureDetector(
        onTap: () {
          context.router.push(NotificationDetailsRoute(notification: notification));
        },
        child: Container(
          decoration: KwBoxDecorations.white12,
          padding: const EdgeInsets.all(12),
          height: 72,
          child: Row(
            children: [
              _buildIcon(),
              Gap(12),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(children: [
                      Text(
                        notification.title,
                        style: AppTextStyles.bodyMediumMed,
                      ),
                      const Spacer(),
                      Text(
                        DateFormat('hh:mm a').format(notification.dateTime),
                        style: AppTextStyles.bodyMediumMed,
                      ),
                    ]),
                    Gap(8),
                    Text(
                      notification.title,
                      overflow: TextOverflow.ellipsis,
                      style: AppTextStyles.bodySmallMed,
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  _buildIcon() {
    return Stack(
      children: [
        Container(
          height: 48,
          width: 48,
          decoration: BoxDecoration(
            color: AppColors.bgColorDark,
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Assets.images.icons.receiptSearch.svg(
                height: 24,
                width: 24,
                colorFilter: const ColorFilter.mode(
                  AppColors.primaryMint,
                  BlendMode.srcIn,
                )),
          ),
        ),
        if (notification.isRead == false)
          Positioned(
            right: 0,
            top: 0,
            child: Container(
              height: 12,
              width: 12,
              decoration: BoxDecoration(
                color: AppColors.statusError,
                border: Border.all(
                  color: AppColors.grayWhite,
                  width: 2,
                ),
                shape: BoxShape.circle,
              ),
            ),
          )
      ],
    );
  }
}
