import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/notification_model.dart';
import 'package:fcs/vo/notification.dart' as Noti;
import 'package:fcs/widget/localization/app_translations.dart';
import 'package:fcs/widget/progress.dart';

import '../theme/theme.dart';
import '../widget/local_text.dart';

class NotificationList extends StatefulWidget {
  @override
  _NotificationListState createState() => _NotificationListState();
}

class _NotificationListState extends State<NotificationList> {
  var timeFormatter = new DateFormat('KK:mm a');
  var dateFormatter = new DateFormat('dd MMM yyyy');
  final double dotSize = 15.0;
  int _selectedIndex = 0;
  bool _isLoading = false;
  bool _isClicked = false;

  @override
  Widget build(BuildContext context) {
    NotificationModel notificationModel =
        Provider.of<NotificationModel>(context);

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: LocalText(
            context,
            'noti.title',
            fontSize: 18,
            color: Colors.white,
          ),
          // actions: <Widget>[
          //   PopupMenuButton<PopupMenu>(
          //       elevation: 3.2,
          //       onSelected: (selected) {
          //         setState(() {
          //           this._selectedIndex = selected.index;
          //         });
          //         notificationModel.filter(selected.index);
          //       },
          //       icon: Container(
          //           width: 30,
          //           height: 30,
          //           decoration: new BoxDecoration(
          //             shape: BoxShape.circle,
          //             color: Colors.white,
          //           ),
          //           child: Stack(
          //             fit: StackFit.expand,
          //             children: <Widget>[
          //               Icon(
          //                 Icons.filter_list,
          //                 color: primaryColor,
          //               ),
          //               _selectedIndex != 0
          //                   ? Positioned(
          //                       bottom: 0,
          //                       right: 0,
          //                       child: Container(
          //                         width: 10,
          //                         height: 10,
          //                         decoration: new BoxDecoration(
          //                           shape: BoxShape.circle,
          //                           color: secondaryColor,
          //                         ),
          //                       ),
          //                     )
          //                   : Container()
          //             ],
          //           )),
          //       itemBuilder: (BuildContext context) {
          //         return notificationMenu.map((PopupMenu choice) {
          //           return PopupMenuItem<PopupMenu>(
          //             value: choice,
          //             child: Row(
          //               children: <Widget>[
          //                 Text(choice.status),
          //                 SizedBox(
          //                   width: 10,
          //                 ),
          //                 _selectedIndex != null &&
          //                         _selectedIndex == choice.index
          //                     ? Icon(
          //                         Icons.check,
          //                         color: Colors.grey,
          //                       )
          //                     : Container(),
          //               ],
          //             ),
          //           );
          //         }).toList();
          //       }),
          // ],
        ),
        body: new ListView.separated(
            separatorBuilder: (context, index) => Divider(
                  color: Colors.black,
                ),
            scrollDirection: Axis.vertical,
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            shrinkWrap: true,
            itemCount: notificationModel.notifications.length,
            itemBuilder: (BuildContext context, int index) {
              Noti.Notification noti = notificationModel.notifications[index];
              return Stack(
                children: <Widget>[
                  InkWell(
                    onTap: () => _display(noti),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: new Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10.0),
                            child: new Row(
                              children: <Widget>[
                                // new Padding(
                                //   padding: new EdgeInsets.symmetric(
                                //       horizontal: 32.0 - dotSize / 2),
                                //   child: Icon(Icons.message),
                                // ),
                                new Padding(padding: EdgeInsets.only(left: 10)),
                                new Expanded(
                                  child: new Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      noti.marketPlace == null
                                          ? Container()
                                          : new Text(
                                              noti.marketPlace,
                                              style: new TextStyle(
                                                  fontSize: 15.0,
                                                  color: secondaryColor),
                                            ),
                                      new Text(
                                        noti.getDesc,
                                        style: new TextStyle(
                                            fontSize: 15.0,
                                            color: secondaryColor),
                                      ),
                                      new Text(
                                        noti.status == null ? "" : noti.status,
                                        style: new TextStyle(
                                            fontSize: 13.0,
                                            color: secondaryColor),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(timeFormatter.format(noti.time)),
                            ),
                            noti.fromToday()
                                ? Container()
                                : Text(dateFormatter.format(noti.time)),
                          ],
                        )
                      ],
                    ),
                  ),
                  // noti.seen
                  //     ? Container()
                  //     : new Positioned(
                  //         left: 11,
                  //         top: 11,
                  //         child: new Container(
                  //           padding: EdgeInsets.all(2),
                  //           decoration: new BoxDecoration(
                  //             color: Colors.red,
                  //             borderRadius: BorderRadius.circular(6),
                  //           ),
                  //           constraints: BoxConstraints(
                  //             minWidth: 18,
                  //             minHeight: 18,
                  //           ),
                  //           child: Text(
                  //             'new',
                  //             style: TextStyle(
                  //               color: Colors.white,
                  //               fontSize: 14,
                  //             ),
                  //             textAlign: TextAlign.center,
                  //           ),
                  //         ),
                  //       )
                ],
              );
            }),
      ),
    );
  }

  _display(Noti.Notification noti) {}
}