import 'package:app_hit_a_wod/src/models/subscription_selection.model.dart';
import 'package:app_hit_a_wod/src/pages/billing/billing.page.dart';
import 'package:app_hit_a_wod/src/pages/box_calendar/box_calendar.page.dart';
import 'package:app_hit_a_wod/src/pages/initial/initial.page.dart';
import 'package:app_hit_a_wod/src/pages/stats/stats.page.dart';
import 'package:app_hit_a_wod/src/pages/user/user.page.dart';
import 'package:app_hit_a_wod/src/providers/main_scaffold.provider.dart';
import 'package:app_hit_a_wod/src/providers/snackbar.provider.dart';
import 'package:app_hit_a_wod/src/providers/user-subscriptions.provider.dart';
import 'package:app_hit_a_wod/src/styles.dart';
import 'package:app_hit_a_wod/src/utils/fontello/my_flutter_app_icons.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final _us_provider = Provider.of<UserSubscriptionsProvider>(context);
    final _snackbar = Provider.of<SnackbarProvider>(context);
    final _scaffoldProvider = Provider.of<MainScaffoldProvider>(context);

    return GestureDetector(
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus) {
          currentFocus.unfocus();
        }
      },
      child: Container(
        decoration: BoxDecoration(
          gradient: neuGradient
        ),
        child: StreamBuilder<int>(
          stream: _scaffoldProvider.pageStream,
          builder: (context, snapshot) {
            final int page = snapshot.hasData ? snapshot.data : 0;
            return Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Color(0xFFEFF0F3),
                elevation: 5,
                title: _logoTitle(),
                brightness: Brightness.light,
                leading: SizedBox(width: 50, height: 40,),
                actions: <Widget>[
                  StreamBuilder(
                    stream: _us_provider.activeStream,
                    builder: (context, data) {
                      _snackbar.setContext(context);
                      _us_provider.setContext(context);
                      if(data.hasData) {
                        final SubscriptionSelection ss = data.data;
                        return GestureDetector(
                          onTap: _us_provider.openSubscriptionsDialog,
                          child: Padding(
                            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                            child: Container( 
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: CachedNetworkImageProvider(ss.company.logo_url),
                                ),
                                boxShadow: [BoxShadow(
                                  color: neuShadowDarkColor,
                                  blurRadius: 10,
                                  spreadRadius: -2,
                                  offset: Offset(3.0, 3.0, )
                                )]
                              ),
                              width: 40,
                            ),
                          ),
                        );
                      }
                      else return Padding(padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10), child: neuSkeletonCircle(50,50));
                    }
                  )
                ],
              ),
              body: Builder(builder: (BuildContext context) {
                _snackbar.setContext(context);
                _us_provider.setContext(context);
                return _callPage(page);
              }),
              bottomNavigationBar: Builder(builder: (context) {
                _snackbar.setContext(context);
                _us_provider.setContext(context);
                return _crearBottomNavigationBar(_scaffoldProvider, page, _us_provider);
              }),
            );
          }
        ),
      ),
    );
  }

  Widget _logoTitle() {
    return Container(
      height: 90,
      padding: EdgeInsets.only(top:20, bottom:20),
      child: SafeArea(
        child: Row (
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            shaderContainer(Icon(MyFlutterApp.haw, size: 40,),'in'),
            SizedBox(width: 8,),
            Image.asset('assets/icon/nom.png',height: 25,),
          ]
        )
      )
    );
  }

  Widget _callPage(int page) {
    switch( page ) {
      case 0: return InitialPage();
      case 1: return BoxCalendarPage();
      case 2: return StatsPage();
      case 3: return BillingPage();
      case 4: return UserPage();
      default: return InitialPage();
    }
  }

  Widget _crearBottomNavigationBar(MainScaffoldProvider _scaffoldProvider, int page, UserSubscriptionsProvider _us_provider) {
    return Container(
      decoration: BoxDecoration(
        gradient: neuGradient,
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            blurRadius: 15.0, // has the effect of softening the shadow
            spreadRadius: 0.5, // has the effect of extending the shadow
            offset: Offset(
              10.0, // horizontal, move right 10
              10.0, // vertical, move down 10
            ),
          )
        ]
      ),
      child: _bottomNavigationBar(_scaffoldProvider, page, _us_provider)
    );
  }

  Widget _bottomNavigationBar(MainScaffoldProvider _scaffoldProvider, int page, UserSubscriptionsProvider _us_provider) {
    return BottomNavigationBar(
      currentIndex: page,
      onTap: (index) {
        _scaffoldProvider.setPage(index);
      },
      backgroundColor: Colors.transparent,
      elevation: 0,
      selectedItemColor: const Color.fromRGBO(189, 52, 194, 1),
      type : BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Icon(MyFlutterApp.home, size: 0),
          title: _buildIconNavbar(page==0, 0, MyFlutterApp.home, _scaffoldProvider)
        ),
        BottomNavigationBarItem(
          icon: Icon(MyFlutterApp.calendar, size: 0),
          title: _buildIconNavbar(page==1, 1, MyFlutterApp.calendar, _scaffoldProvider)
        ),
        BottomNavigationBarItem(
          icon: Icon(MyFlutterApp.chart_bar, size: 0),
          title: _buildIconNavbar(page==2, 2, MyFlutterApp.chart_bar, _scaffoldProvider)
        ),
        BottomNavigationBarItem(
          icon: Icon(MyFlutterApp.wallet, size: 0),
          title: _buildIconNavbar(page==3, 3, MyFlutterApp.wallet, _scaffoldProvider)
        ),
        BottomNavigationBarItem(
          icon: GestureDetector(
            child: Icon(MyFlutterApp.user, size: 0),
            onLongPress: _us_provider.openSubscriptionsDialog,
          ),
          title: GestureDetector(
            child: _buildIconNavbar(page==4, 4, MyFlutterApp.user, _scaffoldProvider),
            onLongPress: _us_provider.openSubscriptionsDialog,
          )
        )
      ],
    );
  }

  Widget _buildIconNavbar(bool selected, int index, IconData iconData, MainScaffoldProvider _scaffoldProvider){
    if (selected) {
      return Container(
        height: 50,
        width: 50,
        child: NeumorphicButton(
          onClick: () {
            _scaffoldProvider.setPage(index);
          },
          style: neuStylePressed(),
          boxShape: NeumorphicBoxShape.stadium(),
          padding: EdgeInsets.only(right:0),
          child: Icon(iconData,color: Color.fromRGBO(189, 52, 194, 1),size: 25,)
        ),
      );
    } else {
      return Container(
        margin: EdgeInsets.only(bottom:10),
        child:Icon(iconData, color: Colors.grey[700], size: 30,)
      );
    }
  }

}