import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/device_model.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/vo/device.dart';
import 'package:fcs/vo/popup_menu.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/popupmenu.dart';
import 'package:fcs/widget/progress.dart';

import '../fcs/common/theme.dart';
import 'util.dart';

class PhoneDeviceList extends StatefulWidget {
  @override
  _PhoneDeviceListState createState() => _PhoneDeviceListState();
}

class _PhoneDeviceListState extends State<PhoneDeviceList> {
  final double dotSize = 15.0;
  PopupMenu selectedChoices = deviceMenu[0];
  bool _isLoading = false;
  PhoneDevice phoneDevice = new PhoneDevice();

  @override
  Widget build(BuildContext context) {
    var deviceModel = Provider.of<PhoneDeviceModel>(context);

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: LocalText(
            context,
            'profile.devices',
            color: Colors.white,
            fontSize: 20,
          ),
        ),
        body: new ListView.builder(
            scrollDirection: Axis.vertical,
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            shrinkWrap: true,
            itemCount: deviceModel.devices.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                elevation: 10,
                color: Colors.white,
                child: InkWell(
                  onTap: () {},
                  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: 15.0 - dotSize / 2),
                                child: Padding(
                                  padding: EdgeInsets.all(5.0),
                                  child: Image.asset(
                                    "assets/device.png",
                                    width: 40,
                                    height: 40,
                                    color: primaryColor,
                                  ),
                                ),
                              ),
                              new Expanded(
                                child: new Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Text(
                                      deviceModel.devices[index].name,
                                      style: new TextStyle(
                                          fontSize: 13.0, color: Colors.black),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      PopupMenuButton<PopupMenu>(
                          elevation: 3.2,
                          onSelected: _select,
                          itemBuilder: (BuildContext context) {
                            this.phoneDevice = deviceModel.devices[index];
                            return deviceMenu.map((PopupMenu choice) {
                              return PopupMenuItem<PopupMenu>(
                                enabled: choice.index == 0
                                    ? deviceModel.devices[index].isDeviceOn()
                                        ? false
                                        : true
                                    : choice.index == 1
                                        ? deviceModel.devices[index]
                                                .isDeviceOn()
                                            ? true
                                            : false
                                        : true,
                                value: choice,
                                child: Text(choice.status),
                              );
                            }).toList();
                          }),
                    ],
                  ),
                ),
              );
            }),
      ),
    );
  }

  void _select(PopupMenu choice) async {
    selectedChoices = choice;
    if (choice.index == 0) {
      showConfirmDialog(context, "device.confirm", () {
        _confirm();
      });
    } else if (choice.index == 1) {
      showConfirmDialog(context, "device.logout", () {
        _logout();
      });
    } else if (choice.index == 2) {
      showConfirmDialog(context, "device.set_primary", () {
        _setPrimaryDevice();
      });
    }
  }

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

    try {
      var deviceModel = Provider.of<PhoneDeviceModel>(context);
      var mainModel = Provider.of<MainModel>(context);

      await deviceModel.confirmDevice(
          mainModel.user.phoneNumber, this.phoneDevice.id);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

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

    try {
      var deviceModel = Provider.of<PhoneDeviceModel>(context);
      var mainModel = Provider.of<MainModel>(context);

      await deviceModel.logoutDevice(
          mainModel.user.phoneNumber, this.phoneDevice.id);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

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

    try {
      var deviceModel = Provider.of<PhoneDeviceModel>(context);
      var mainModel = Provider.of<MainModel>(context);
      await deviceModel.setPrimaryDevice(
          mainModel.user.phoneNumber, this.phoneDevice.id);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}