import 'dart:convert';
import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:shinewash_employee/api/api.dart';
import 'package:shinewash_employee/screens/edit_profile.dart';
import 'package:shinewash_employee/screens/employee_profile.dart';
import 'package:shinewash_employee/screens/home_page.dart';

import 'faq.dart';
import 'notification.dart';
import 'privacy_policy.dart';
import 'sign_in.dart';
// import 'package:shinewash/api/api.dart';
// import 'package:shinewash/screens/all_appointment.dart';
// import 'package:shinewash/screens/faq.dart';
// import 'package:shinewash/screens/full_profile.dart';
// import 'package:shinewash/screens/home/home_page.dart';
// import 'package:shinewash/screens/notification.dart';
// import 'package:shinewash/screens/privacy_policy.dart';
// import 'package:shinewash/screens/sign_in.dart';

const darkBlue = Color(0xFF265E9E);
const extraDarkBlue = Color(0xFF91B4D8);

class CustomDrawer extends StatefulWidget {
  final int index;

  const CustomDrawer({Key key, @required this.index}) : super(key: key);
  @override
  _CustomDrawerState createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  int tappedIndex;
  var _userName = '';
  var _completeImage = '';
  // int _employeeId;
  var _isLoggedIn = false;
  var showSpinner = false;

  @override
  void initState() {
    _getUserInfo();
    tappedIndex = widget.index;
    super.initState();
  }

  Future<bool> check() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.mobile) {
      return true;
    } else if (connectivityResult == ConnectivityResult.wifi) {
      return true;
    }
    return false;
  }

  Future<void> _getUserInfo() async {
    check().then((intenet) async {
      if (intenet != null && intenet) {
        setState(() {
          showSpinner = true;
        });
        var res = await CallApi().getWithToken('employee');
        var body = json.decode(res.body);
        var theData = body['data'];
        setState(() {
          showSpinner = false;
        });
        _userName = theData['name'];
        _completeImage = theData['completeImage'];
        // _employeeId = theData['id'];
      } else {
        showDialog(
          builder: (context) => AlertDialog(
            title: Text('Internet connection'),
            content: Text('Check your internet connection'),
            actions: <Widget>[
              FlatButton(
                onPressed: () async {
                  Navigator.pop(context);
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => CustomDrawer(
                          index: 10,
                        ),
                      ));
                },
                child: Text('OK'),
              )
            ],
          ),
          context: context,
        );
      }
    });
  }

  List items = [
    'Appointment',
    'Notification',
    'Privacy Policies',
    'FAQ',
    'Logout',
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ModalProgressHUD(
        inAsyncCall: showSpinner,
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Drawer(
            child: Column(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Theme.of(context).primaryColor,
                      borderRadius:
                          BorderRadius.vertical(bottom: Radius.circular(50.0)),
                    ),
                    child: Stack(
                      children: [
                        Positioned(
                          left: 10.0,
                          top: 10.0,
                          child: IconButton(
                            icon: Icon(
                              Icons.chevron_left,
                              color: Colors.white,
                              size: 22.0,
                            ),
                            onPressed: () {
                              Navigator.pop(context);
                            },
                          ),
                        ),
                        Center(
                          child: Column(
                            children: [
                              SizedBox(
                                  height: MediaQuery.of(context).size.height *
                                      0.05),
                              Container(
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white,
                                  border: Border.all(
                                    color: Colors.white,
                                    width: 3.0,
                                  ),
                                ),
                                child: GestureDetector(
                                  onTap: () {
                                    Navigator.pushReplacement(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) => EmployeeProfile(
                                              // previousEmployeeId: _employeeId,
                                              ),
                                        ));
                                  },
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(50.0),
                                    ),
                                    child: Image(
                                      image: NetworkImage(_completeImage),
                                      fit: BoxFit.fill,
                                      width: 100.0,
                                      height: 100.0,
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox(
                                  height: MediaQuery.of(context).size.height *
                                      0.03),
                              Text(
                                _userName,
                                style: TextStyle(
                                  fontFamily: 'FivoSansMedium',
                                  fontSize: 18,
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: items.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              items[index],
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: tappedIndex == index
                                    ? Theme.of(context).primaryColor
                                    : darkBlue,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                        onTap: () {
                          setState(
                            () {
                              Navigator.pop(context);
                              if (items[index] == 'Appointment') {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => HomePage()));
                              }
                              if (items[index] == 'Notification') {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => Notifications()));
                              }
                              if (items[index] == 'Privacy Policies') {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => PrivacyPolicy()));
                              }
                              if (items[index] == 'FAQ') {
                                Navigator.push(context,
                                    MaterialPageRoute(builder: (_) => FAQ()));
                              }
                              if (items[index] == 'Logout') {
                                CallApi().logout();
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => SignIn()));
                              }
                              tappedIndex = index;
                            },
                          );
                        },
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
