tm_app/lib/views/notification/widgets/notification_card.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/constants/assets.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/data/services/model/notification__response/notification_response_model.dart';
import 'package:tm_app/view_models/notification_view_model.dart';
import 'package:tm_app/views/notification/widgets/notification_more_dialog.dart';

import '../strings/notification_strings.dart';

class NotificationCard extends StatelessWidget {
  final NotificationItem notification;
  const NotificationCard({required this.notification, super.key});

  @override
  Widget build(BuildContext context) {
    final viewModel = context.read<NotificationViewModel>();
    return Container(
      width: double.infinity,
      margin: EdgeInsets.symmetric(horizontal: 24.0.w()),
      padding: EdgeInsets.symmetric(horizontal: 16.0.w(), vertical: 16.0.h()),
      decoration: BoxDecoration(
        color:
            notification.priority == NotificationStrings.important.toLowerCase()
                ? AppColors.orange10
                : AppColors.primary10Light,

        borderRadius: BorderRadius.circular(4),
        border:
            notification.priority == NotificationStrings.important.toLowerCase()
                ? Border.all(color: AppColors.orange20)
                : Border.all(color: AppColors.primary20),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SvgPicture.asset(AssetsManager.notification),
              SizedBox(width: 8.0.w()),
              Text(
                notification.title!,
                style: TextStyle(
                  fontSize: 16.0.sp(),
                  fontWeight: FontWeight.w600,
                  color: AppColors.grey80,
                ),
              ),
              const Spacer(),
              Visibility(
                visible:
                    notification.priority ==
                    NotificationStrings.important.toLowerCase(),
                child: Container(
                  width: 86.0.w(),
                  height: 24.0.h(),
                  decoration: BoxDecoration(
                    color: AppColors.orange20,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    NotificationStrings.important,
                    style: TextStyle(
                      fontSize: 12.0.sp(),
                      fontWeight: FontWeight.w500,
                      color: AppColors.yellow4,
                    ),
                  ),
                ),
              ),
              SizedBox(width: !notification.seen! ? 8.0.w() : 0),
              !notification.seen!
                  ? Container(
                    width: 12.0.w(),
                    height: 12.0.w(),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color:
                          notification.priority ==
                                  NotificationStrings.important.toLowerCase()
                              ? AppColors.orange
                              : AppColors.mainBlue,
                    ),
                  )
                  : const SizedBox(),
              SizedBox(width: 5.0.w()),
            ],
          ),

          SizedBox(height: 8.0.h()),
          Padding(
            padding: EdgeInsets.only(left: 28.0.w()),
            child: Text(
              notification.message!,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 14.0.sp(),
                fontWeight: FontWeight.w400,
                color: AppColors.grey70,
              ),
            ),
          ),
          SizedBox(height: 12.0.h()),
          Padding(
            padding: EdgeInsets.only(left: 28.0.w()),
            child: Row(
              children: [
                SvgPicture.asset(AssetsManager.calendar),
                SizedBox(width: 4.0.w()),
                Text(
                  viewModel.timeAgo(notification.createdAt!.toString()),
                  style: TextStyle(
                    fontSize: 12.0.sp(),
                    fontWeight: FontWeight.w400,
                    color: AppColors.grey60,
                  ),
                ),
                const Spacer(),
                TextButton(
                  onPressed: () {
                    showDialog(
                      context: context,
                      builder: (context) {
                        return NotificationMoreDialog(
                          notification: notification,
                          viewModel: viewModel,
                        );
                      },
                    ).then((value) {
                      if (context.mounted) {
                        viewModel.checkNotifications(context);
                      }
                    });
                  },
                  child: Row(
                    children: [
                      Text(
                        NotificationStrings.moreTextButton,
                        style: TextStyle(
                          fontSize: 14.0.sp(),
                          fontWeight: FontWeight.w500,
                          color: AppColors.mainBlue,
                        ),
                      ),
                      SizedBox(width: 4.0.w()),
                      SvgPicture.asset(
                        AssetsManager.arrowRight,
                        colorFilter: const ColorFilter.mode(
                          AppColors.mainBlue,
                          BlendMode.srcIn,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}