import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/user_model.dart';
import 'package:fcs/pages/util.dart';
import 'package:fcs/theme/theme.dart';
import 'package:fcs/vo/popup_menu.dart';
import 'package:fcs/vo/user.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/popupmenu.dart';
import 'package:fcs/widget/progress.dart';

import 'user_editor.dart';
import 'package:intl/intl.dart';

import 'user_search_page.dart';

class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  var dateFormatter = new DateFormat('dd MMM yyyy - hh:mm:ss a');
  final double dotSize = 15.0;
  bool _isLoading = false;
  PopupMenu selectedChoices = userpopup[0];
  User user = new User();
  int _selectedIndex;

  @override
  void initState() {
    var userModel = Provider.of<UserModel>(context, listen: false);
    var index = userModel.popupMenu.index;
    _selectedIndex = index;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var userModel = Provider.of<UserModel>(context);
    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: LocalText(context, 'users.title',
              color: Colors.white, fontSize: 20),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.search,
                color: Colors.white,
              ),
              iconSize: 30,
              onPressed: () => showUserPlacesSearch(context),
            ),
            PopupMenuButton<PopupMenu>(
                elevation: 3.2,
                onSelected: (selected) {
                  setState(() {
                    this._selectedIndex = selected.index;
                  });
                  userModel.filterSorting(_selectedIndex);
                },
                icon: Container(
                    width: 30,
                    height: 30,
                    decoration: new BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white,
                    ),
                    child: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        Icon(
                          Icons.sort,
                          color: primaryColor,
                        ),
                        _selectedIndex != null
                            ? Positioned(
                                bottom: 0,
                                right: 0,
                                child: Container(
                                  width: 10,
                                  height: 10,
                                  decoration: new BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: secondaryColor,
                                  ),
                                ),
                              )
                            : Container()
                      ],
                    )),
                itemBuilder: (BuildContext context) {
                  return userMenu.map((PopupMenu choice) {
                    return PopupMenuItem<PopupMenu>(
                      value: choice,
                      child: Container(
                        padding: EdgeInsets.only(left: 8),
                        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.builder(
            padding: EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 10),
            shrinkWrap: true,
            itemCount: userModel.getUserList().length,
            itemBuilder: (BuildContext context, int index) {
              User _u = userModel.getUserList()[index];
              return Card(
                elevation: 10,
                color: Colors.white,
                child: InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => UserEditor(user: _u)),
                    );
                  },
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: new Padding(
                          padding: const EdgeInsets.symmetric(vertical: 7.0),
                          child: new Row(
                            children: <Widget>[
                              new Padding(
                                padding: new EdgeInsets.symmetric(
                                    horizontal: 20.0 - dotSize / 2),
                                child: Icon(
                                  Icons.account_circle,
                                  color: primaryColor,
                                  size: 55,
                                ),
                              ),
                              Flexible(
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Text(
                                      (_u.name == null ? "" : _u.name) +
                                          (_u.isBlock ? " (Blocked)" : ""),
                                      style: new TextStyle(
                                          fontSize: 16.0, color: Colors.black),
                                    ),
                                    new Text(
                                      _u.phone == null ? "" : _u.phone,
                                      style: new TextStyle(
                                          fontSize: 14.0, color: Colors.grey),
                                    ),
                                    _u.device == null
                                        ? Text("No login",
                                            style: TextStyle(color: Colors.red))
                                        : Text("last active",
                                            style:
                                                TextStyle(color: Colors.green)),
                                    Text(
                                        "${_u.device == null ? "" : _u.device}",
                                        style: TextStyle(fontSize: 11)),
                                    Text(
                                        "${_u.lastActiveTime == null ? "" : dateFormatter.format(_u.lastActiveTime)}")
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      PopupMenuButton<PopupMenu>(
                          elevation: 3.2,
                          tooltip: 'This is tooltip',
                          onSelected: _select,
                          itemBuilder: (BuildContext context) {
                            this.user = _u;
                            return userpopup.map((PopupMenu choice) {
                              return PopupMenuItem<PopupMenu>(
                                enabled: choice.index == 1
                                    ? _u.isBlockUser() ? false : true
                                    : _u.isBlockUser() ? true : false,
                                value: choice,
                                child: Text(choice.status),
                              );
                            }).toList();
                          })
                    ],
                  ),
                ),
              );
            }),
      ),
    );
  }

  void _select(PopupMenu choice) async {
    selectedChoices = choice;
    if (choice.index == 1) {
      showConfirmDialog(context, "user.block.confirm", () {
        _block();
      });
    } else if (choice.index == 2) {
      showConfirmDialog(context, "user.unblock.confirm", () {
        _unblock();
      });
    }
  }

  _block() async {
    setState(() {
      _isLoading = true;
    });

    try {
      var userModel = Provider.of<UserModel>(context);
      await userModel.blockPhone(this.user.phoneNumber);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  _unblock() async {
    setState(() {
      _isLoading = true;
    });

    try {
      var userModel = Provider.of<UserModel>(context);
      await userModel.unblockPhone(this.user.phoneNumber);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}