import 'dart:ui';

import 'package:diplomaticquarterapp/config/config.dart';
import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart';
import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/h20_setting.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/month_page.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/today_page.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/week_page.dart';
import 'package:diplomaticquarterapp/pages/ToDoList/ToDo.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/medical/medical_profile_page.dart';
import 'package:diplomaticquarterapp/routes.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/bottom_navigation/bottom_nav_bar.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class H2OPage extends StatefulWidget {
  @override
  _H2OPageState createState() => _H2OPageState();
}

class _H2OPageState extends State<H2OPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 3,
      vsync: this,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<H2OViewModel>(
      onModelReady: (model) => model.getUserDetail(),
      builder: (_, model, widget) => AppScaffold(
        isShowAppBar: true,
        appBarTitle: TranslationBase.of(context).waterTracker,
        description: TranslationBase.of(context).h2oInfo,
        imagesInfo: [
          ImagesInfo(
              imageEn: 'https://hmgwebservices.com/Images/MobileApp/images-info-home/h2o/en/0.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/images-info-home/h2o/ar/0.png')
        ],
        showHomeAppBarIcon: false,
        baseViewModel: model,
        isHelp: true,
        appBarIcons: [
          model.isLogin
              ? IconButton(
                  icon: Image.asset("assets/images/new-design/setting_gear_icon.png"),
                  color: Colors.white,
                  onPressed: () {
                    Navigator.push(
                      context,
                      FadePage(
                        page: H2oSetting(userDetailModel: model.userDetail, viewModel: model),
                      ),
                    );
                  },
                )
              : Container(),
        ],
        body: Scaffold(
          extendBodyBehindAppBar: true,
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(65.0),
            child: Stack(
              children: <Widget>[
                Positioned(
                  bottom: 1,
                  left: 0,
                  right: 0,
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Container(
                      color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.8),
                      height: 70.0,
                    ),
                  ),
                ),
                Center(
                  child: Container(
                    height: 60.0,
                    alignment: Alignment.center,
                    //   margin: EdgeInsets.only(top: 10.0),
                    //   width: MediaQuery.of(context).size.width * 0.9,

                    child: TabBar(
                      isScrollable: false,
                      controller: _tabController,
                      indicatorWeight: 5.0,
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicatorColor: Colors.red[800],
                      labelColor: Theme.of(context).primaryColor,
                      labelPadding: EdgeInsets.only(top: 4.0, left: 10.0, right: 13.0),
                      unselectedLabelColor: Colors.grey[800],
                      tabs: [
                        Container(
                          width: MediaQuery.of(context).size.width * 0.28,
                          child: Center(
                            child: Texts(TranslationBase.of(context).today),
                          ),
                        ),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.28,
                          child: Center(
                            child: Texts(TranslationBase.of(context).week),
                          ),
                        ),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.28,
                          child: Center(
                            child: Texts(TranslationBase.of(context).month),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          backgroundColor: Colors.white,
          body: Column(
            children: <Widget>[
              Expanded(
                child: TabBarView(
                  physics: BouncingScrollPhysics(),
                  controller: _tabController,
                  children: <Widget>[TodayPage(), WeekPage(), MonthPage()],
                ),
              )
            ],
          ),
          bottomNavigationBar: BottomNavBar(
            changeIndex: (index) {
              if (index == 0) {
                IS_VOICE_COMMAND_CLOSED = false;
              } else if (index == 1) {
                Navigator.push(
                    context,
                    FadePage(
                        page: AppScaffold(
                            appBarTitle: TranslationBase.of(context).medicalProfile,
                            isShowAppBar: true,
                            showHomeAppBarIcon: false,
                            appBarIcons: [
                              IconButton(
                                icon: Image.asset("assets/images/new-design/setting_gear_icon.png"),
                                color: Colors.white,
                                onPressed: () => Navigator.of(context).pushNamed(
                                  SETTINGS,
                                ),
                              ),
                            ],
                            body: MedicalProfilePage())));
              } else if (index == 2) {
                Navigator.of(context).pushNamedAndRemoveUntil(HOME, (Route<dynamic> route) => false);
              } else if (index == 3) {
                Navigator.of(context).pushNamed(MY_FAMILIY);
              } else if (index == 4) {
                Navigator.push(context, FadePage(page: ToDo(isShowAppBar: false)));
              }
            },
            showHomeIcon: true,
            index: 0,
          ),
        ),
      ),
    );
  }
}
