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/data_display/text.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);
    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(
              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: Center(
                      child: Image.asset('assets/images/notf.png'),
                    ),
                  );
                }

                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.all(8.0),
                    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: 5.0,
                              ),
                            )
                          : Border(
                              left: BorderSide(
                                color: model.notifications[index].isRead
                                    ? Theme.of(context).scaffoldBackgroundColor
                                    : CustomColors.accentColor,
                                width: 5.0,
                              ),
                            ),
                    ),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Texts(DateUtil.getDayMonthYearDateFormatted(
                                        DateUtil.convertStringToDate(model
                                            .notifications[index].createdOn)) +
                                    " " +
                                    DateUtil.formatDateToTimeLang(
                                        DateUtil.convertStringToDate(model
                                            .notifications[index].createdOn),
                                        false)),
                                SizedBox(
                                  height: 5,
                                ),
                                Row(
                                  children: [
                                    Expanded(
                                        child: Texts(model
                                            .notifications[index].message)),
                                    if (model
                                            .notifications[index].messageType ==
                                        "image")
                                      Icon(
                                        FontAwesomeIcons.images,
                                        color: CustomColors.grey,
                                      )
                                  ],
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return Column(
                  children: [
                    Divider(
                      color: Colors.grey[300],
                      thickness: 2.0,
                    ),
                  ],
                );
              },
              itemCount: model.notifications.length + 1)),
      // ListView(
      //     children: model.notifications
      //         .map(
      //           (notification) => InkWell(
      //             onTap: () async {
      //               if (!notification.isRead) {
      //                 model.markAsRead(notification.id);
      //               }
      //               Navigator.push(
      //                   context,
      //                   FadePage(
      //                       page: NotificationsDetailsPage(
      //                     notification: notification,
      //                   )));
      //             },
      //             child: Container(
      //               width: double.infinity,
      //               padding: EdgeInsets.all(8.0),
      //               decoration: BoxDecoration(
      //                 color: notification.isRead ? CustomColors.white : CustomColors.accentColor.withOpacity(0.05),
      //                 border: Border(
      //                   left: BorderSide(
      //                     color: notification.isRead ? Colors.grey[200] : CustomColors.accentColor,
      //                     width: 5.0,
      //                   ),
      //                 ),
      //               ),
      //               child: Row(
      //                 children: <Widget>[
      //                   Expanded(
      //                     child: Padding(
      //                       padding: const EdgeInsets.all(8.0),
      //                       child: Column(
      //                         crossAxisAlignment: CrossAxisAlignment.start,
      //                         children: <Widget>[
      //                           Texts(DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(notification.createdOn)) + " " + DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(notification.createdOn), false)),
      //                           SizedBox(
      //                             height: 5,
      //                           ),
      //                           Row(
      //                             children: [
      //                               Expanded(
      //                                   child: Texts(notification.message)),
      //                               if (notification.messageType == "image")
      //                                 Icon(FontAwesomeIcons.images, color: CustomColors.grey,)
      //                             ],
      //                           ),
      //                           SizedBox(
      //                             height: 5,
      //                           ),
      //                           Divider(
      //                             height: 5.0,
      //                             color: CustomColors.grey2,
      //                           ),
      //                         ],
      //                       ),
      //                     ),
      //                   ),
      //                 ],
      //               ),
      //             ),
      //           ),
      //         )
      //         .toList()
      //           ..add(
      //             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: Center(
      //                 child: Image.asset('assets/images/notf.png'),
      //               ),
      //             ),
      //           )),
    );
  }
}
