import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:double_back_to_close/double_back_to_close.dart';
import 'package:employee_selfservice_mobile/Screens/Menu/Canvasing/canvasing_screen.dart';
import 'package:employee_selfservice_mobile/Screens/Menu/Dashboard/dashboard_screen.dart';
import 'package:employee_selfservice_mobile/Screens/Menu/History/history_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:focus_detector/focus_detector.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:employee_selfservice_mobile/Screens/Menu/About/about_screen.dart';
import 'package:employee_selfservice_mobile/Screens/Settings/settings_screen.dart';
import 'package:lottie/lottie.dart';
import 'dart:developer' as logDev;
import 'package:internet_connection_checker/internet_connection_checker.dart';


var _imageToShow;

class HomeView extends StatefulWidget {
  @override
  _HomeView createState() => _HomeView();
}

class _HomeView extends State<HomeView> {
  late StreamSubscription subscription;
  bool isDeviceConnected = false;
  bool isAlertSet = false;

  @override
  initState() {
    getConnectivity();
    /*getDetail();*/
    _imageToShow = AssetImage('assets/images/ic_pp_2.png');
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _imageToShow = AssetImage('assets/icons/ic_pp_2.png');
    });
    super.initState();
  }

  getConnectivity() =>
      subscription = Connectivity().onConnectivityChanged.listen(
            (ConnectivityResult result) async {
          isDeviceConnected = await InternetConnectionChecker().hasConnection;
          if (!isDeviceConnected && isAlertSet == false) {
            showConnectivityDialogBox();
            setState(() => isAlertSet = true);
          }
        },
      );

  @override
  void dispose() {
    subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DoubleBack(
        /*onFirstBackPress: (context) {
          final snackBar = SnackBar(content: Text("Double Back Press to Exit"));
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },*/
        message: "Double Back Press to Exit",
        background: Colors.black38,
        backgroundRadius: 10,
        textStyle: TextStyle(
            fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
        child: Scaffold(
            resizeToAvoidBottomInset: false,
            //backgroundColor: Colors.white,
            body: Stack(
              children: <Widget>[
                //Background(),
                //HomeScreen(),
                BottomNavBar()
              ],
            )),
      ),
    );
  }

  showConnectivityDialogBox() =>
      showCupertinoDialog<String>(
        context: context,
        builder: (BuildContext context) =>
            CupertinoAlertDialog(
              title: const Text('No Connection'),
              content: const Text('Please check your internet connectivity'),
              actions: <Widget>[
                Column(
                  children: [
                    SizedBox(
                      width: 250,
                      height: 250,
                      child: LottieBuilder.asset(
                        //'assets/animation/animation_no_internet.json',
                          'assets/animation/animation_no_internet_3.json',
                          repeat: true),
                    ),
                  ],
                ),
                TextButton(
                  onPressed: () async {
                    Navigator.pop(context, 'Cancel');
                    setState(() => isAlertSet = false);
                    isDeviceConnected =
                    await InternetConnectionChecker().hasConnection;
                    if (!isDeviceConnected && isAlertSet == false) {
                      showConnectivityDialogBox();
                      setState(() => isAlertSet = true);
                    }
                  },
                  child: const Text('Retry'),
                ),
              ],
            ),
      );
}

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    HomeScreen(),
    HomeScreen(),
  ];

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.notifications),
              label: 'Notification',
            ), BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.white,
          backgroundColor: Color(0xFF5666b7),
          onTap: _onItemTapped),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
    @override
  Widget build(BuildContext context) {
    var size = MediaQuery
        .of(context)
        .size;

    return FocusDetector(
      /*onVisibilityGained: (){
        getProfileImage();
      },
      onVisibilityLost: (){
        getProfileImage();
      },
      onFocusLost: (){
        getProfileImage();
      },*/
      onFocusGained: () {
        _imageToShow = AssetImage('assets/icons/ic_pp_2.png');
      },
/*      onForegroundLost: (){
        getProfileImage();
      },
      onForegroundGained: (){
        getProfileImage();
      },*/
      child: Scaffold(
          body: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                Container(
                  height: size.height * 0.3,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.topRight,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0xFF4858A7),
                            Color(0xFF6474C6),
                            //Color(0xFF8C99DD),
                          ])),
                ),
                SafeArea(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Column(
                      children: <Widget>[
                        Container(
                          child: Stack(
                            alignment: Alignment.topLeft,
                            children: [
                              Container(
                                margin: EdgeInsets.only(
                                    top: (((size.width - 20) * 0.33) * 0.5) + 40),
                                child: Card(
                                  elevation: 15,
                                  child: Container(
                                      height: size.width * 0.35,
                                      width: size.width - 20,
                                      padding: EdgeInsets.all(15),
                                      decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius:
                                          BorderRadius.all(
                                              Radius.circular(10))),
                                      child: Column(mainAxisAlignment: MainAxisAlignment.end,
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        children: <Widget>[
                                          Text("Ginro",
                                            maxLines: 2,
                                            overflow: TextOverflow.ellipsis,
                                            textAlign: TextAlign.center,
                                            style: GoogleFonts.inter(
                                                fontSize: size.width * 0.045,
                                                color: Colors.black,
                                                fontWeight: FontWeight.bold),
                                          ),
                                          Text("General Manager",
                                            textAlign: TextAlign.center,
                                            style: GoogleFonts.inter(
                                                fontSize: size.width * 0.035,
                                                color: Colors.black),
                                          ),
                                        ],
                                      )),
                                ),
                              ),
                              Align(
                                alignment: Alignment.topCenter,
                                child: Container(
                                  margin: EdgeInsets.only(left: 15, top: 40),
                                  alignment: Alignment.topLeft,
                                  height: (size.width - 20) * 0.33,
                                  width: (size.width - 20) * 0.33,
                                  decoration: BoxDecoration(
                                    color: Colors.black,
                                    image: DecorationImage(
                                      image: AssetImage('assets/icons/ic_pp_2.png'),
                                      fit: BoxFit.cover,
                                    ),
                                    shape: BoxShape.circle,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        GridView.count(
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          padding: EdgeInsets.only(top: 25, left: 5, right: 5),
                          crossAxisSpacing: 15,
                          mainAxisSpacing: 15,
                          crossAxisCount: 2,
                          childAspectRatio: 1.0,
                          children: <Widget>[
                            InkWell(
                                child: Container(
                                    width: size.width,
                                    height: size.height,
                                    decoration: BoxDecoration(
                                        color: Color(0xFFD0D0D0),
                                        borderRadius: BorderRadius.circular(5)),
                                    child: Center(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(
                                            width: size.width * 0.18,
                                            child: Image.asset(
                                                "assets/icons/menu/ic_canvasing_3.png",
                                                fit: BoxFit.contain)
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 5),
                                            child: Text(
                                              'Canvasing',
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.acme(
                                                  fontSize: size.width * 0.045,
                                                  color: Colors.black),
                                            ),
                                          )
                                        ],
                                      ),
                                    )
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              CanvasingScreen()));
                                }),
                            InkWell(
                                child: Container(
                                    width: size.width,
                                    height: size.height,
                                    decoration: BoxDecoration(
                                        color: Color(0xFFD0D0D0),
                                        borderRadius: BorderRadius.circular(5)),
                                    child: Center(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(
                                              width: size.width * 0.18,
                                              child: Image.asset(
                                                  "assets/icons/menu/ic_dashboardcanvasing_1.png",
                                                  fit: BoxFit.contain)
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 5),
                                            child: Text(
                                              'Dashboard Canvasing',
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.acme(
                                                  fontSize: size.width * 0.045,
                                                  color: Colors.black),
                                            ),
                                          )
                                        ],
                                      ),
                                    )
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              DashboardScreen()));
                                }),
                            InkWell(
                                child: Container(
                                    width: size.width,
                                    height: size.height,
                                    decoration: BoxDecoration(
                                        color: Color(0xFFD0D0D0),
                                        borderRadius: BorderRadius.circular(5)),
                                    child: Center(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(
                                              width: size.width * 0.18,
                                              child: Image.asset(
                                                  "assets/icons/menu/ic_history.png",
                                                  fit: BoxFit.contain)
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 5),
                                            child: Text(
                                              'History Canvasing',
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.acme(
                                                  fontSize: size.width * 0.045,
                                                  color: Colors.black),
                                            ),
                                          )
                                        ],
                                      ),
                                    )
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              HistoryScreen()));
                                }),
                            InkWell(
                              child: Container(
                                width: size.width,
                                height: size.height,
                                decoration: BoxDecoration(
                                    color: Color(0xFFD0D0D0),
                                    borderRadius: BorderRadius.circular(5)),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Container(
                                      width: size.width * 0.18,
                                      child: Image.asset(
                                        "assets/icons/menu/ic_about_9.png",
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(top: 5),
                                      child: Text(
                                        'About',
                                        textAlign: TextAlign.center,
                                        style: GoogleFonts.acme(
                                            fontSize: size.width * 0.045,
                                            color: Colors.black),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              onTap: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => AboutScreen()));
                              },
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
                /*Center(
                  child: _widgetOptions.elementAt(_selectedIndex),
                )*/
              ],
            ),
          )
      ),
    );
  }
}