import 'package:diplomaticquarterapp/config/config.dart';
import 'package:diplomaticquarterapp/core/model/notifications/get_notifications_request_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/notifications_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/pages/DrawerPages/notifications/notification_details_page.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';

// ignore: must_be_immutable
class NotificationsPage extends StatelessWidget {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    AppGlobal.context = context;
    return BaseView<NotificationViewModel>(
      onModelReady: (model) {
        GetNotificationsRequestModel getNotificationsRequestModel = new GetNotificationsRequestModel(currentPage: currentIndex, pagingSize: 14, notificationStatusID: 2);

        model.getNotifications(getNotificationsRequestModel, context);
      },
      builder: (_, model, widget) => AppScaffold(
        isShowAppBar: true,
        showNewAppBar: true,
        showNewAppBarTitle: true,
        appBarTitle: TranslationBase.of(context).notifications,
        baseViewModel: model,
        body: ListView.separated(
            physics: BouncingScrollPhysics(),
            itemBuilder: (context, index) {
              if (index == model.notifications.length) {
                return InkWell(
                  onTap: () async {
                    GifLoaderDialogUtils.showMyDialog(context);
                    currentIndex++;
                    GetNotificationsRequestModel getNotificationsRequestModel = new GetNotificationsRequestModel(currentPage: currentIndex, pagingSize: 14, notificationStatusID: 2);

                    await model.getNotifications(getNotificationsRequestModel, context);
                    GifLoaderDialogUtils.hideDialog(context);
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(top: 12, bottom: 12),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.notifications_active,
                          color: CustomColors.accentColor,
                          size: 24,
                        ),
                        SizedBox(width: 8),
                        Text(TranslationBase.of(context).moreNotifications,
                            style: TextStyle(color: CustomColors.accentColor, fontWeight: FontWeight.w600, letterSpacing: -0.42, decoration: TextDecoration.underline)),
                      ],
                    ),
                  ),
                );
              }
              return InkWell(
                onTap: () async {
                  if (!model.notifications[index].isRead) {
                    model.markAsRead(model.notifications[index].id);
                  }
                  Navigator.push(
                    context,
                    FadePage(
                      page: NotificationsDetailsPage(
                        notification: model.notifications[index],
                      ),
                    ),
                  );
                },
                child: Container(
                  width: double.infinity,
                  padding: EdgeInsets.fromLTRB(15.0, 14, 21, 12),
                  decoration: BoxDecoration(
                    color: model.notifications[index].isRead ? Theme.of(context).scaffoldBackgroundColor : CustomColors.accentColor.withOpacity(0.05),
                    border: projectViewModel.isArabic
                        ? Border(
                            right: BorderSide(
                              color: model.notifications[index].isRead ? Theme.of(context).scaffoldBackgroundColor : CustomColors.accentColor,
                              width: 6.0,
                            ),
                          )
                        : Border(
                            left: BorderSide(
                              color: model.notifications[index].isRead ? Theme.of(context).scaffoldBackgroundColor : CustomColors.accentColor,
                              width: 6.0,
                            ),
                          ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: [
                          Expanded(
                            child: Text(
                              DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(model.notifications[index].createdOn)) +
                                  " " +
                                  DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(model.notifications[index].createdOn), false),
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                color: Color(0xff2E303A),
                                letterSpacing: -0.64,
                              ),
                            ),
                          ),
                          if (model.notifications[index].messageType == "image")
                            Icon(
                              FontAwesomeIcons.image,
                              color: Color(0xffC9C9C9),
                            )
                        ],
                      ),
                      SizedBox(height: 4),
                      Text(
                        model.notifications[index].message.trim(),
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w600,
                          color: Color(0xff575757),
                          letterSpacing: -0.48,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
            separatorBuilder: (context, index) {
              return Column(
                children: [
                  Divider(
                    color: Color(0xffEFEFEF),
                    thickness: 2.0,
                    height: 1,
                  ),
                ],
              );
            },
            itemCount: model.notifications.length + 1),
      ),
    );
  }
}
