import 'dart:ui';

import 'package:diplomaticquarterapp/core/viewModels/medical/blood_pressure_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/medical/blood_sugar_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.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';
import 'package:hexcolor/hexcolor.dart';

import 'AddBloodPressurePage.dart';
import 'BloodPressureMonthly.dart';
import 'BloodPressureYeaPage.dart';
import 'bloodPressureWeeklyPage.dart';

class BloodPressureHomePage extends StatefulWidget {
  @override
  _BloodPressureHomePageState createState() => _BloodPressureHomePageState();
}

class _BloodPressureHomePageState extends State<BloodPressureHomePage>
    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<BloodPressureViewMode>(
      onModelReady: (model) => model.getBloodPressure(),
      builder: (_, model, w) => AppScaffold(
        isShowAppBar: true,
        appBarTitle: 'Blood Pressure',
        baseViewModel: model,
        body: Scaffold(
          extendBodyBehindAppBar: true,
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(60.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: 55.0,
                    color: Colors.white,
                    child: Center(
                      child: TabBar(
                        isScrollable: true,
                        controller: _tabController,
                        indicatorWeight: 5.0,
                        indicatorSize: TabBarIndicatorSize.label,
                        indicatorColor: Colors.red[800],
                        labelColor: Theme.of(context).primaryColor,
                        labelPadding:
                            EdgeInsets.only(top: 4.0, left: 5.0, right: 5.0),
                        unselectedLabelColor: Colors.grey[800],
                        tabs: [
                          Container(
                            width: MediaQuery.of(context).size.width * 0.27,
                            child: Center(
                              child: Texts('Weekly'),
                            ),
                          ),
                          Container(
                            width: MediaQuery.of(context).size.width * 0.27,
                            child: Center(
                              child: Texts('Monthly'),
                            ),
                          ),
                          Container(
                            width: MediaQuery.of(context).size.width * 0.27,
                            child: Center(
                              child: Texts('Yearly'),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: TabBarView(
                  physics: BouncingScrollPhysics(),
                  controller: _tabController,
                  children: <Widget>[
                    BloodPressureWeeklyPage(
                      data: model.getBloodWeeklySeries(),
                      diabtecPatientResult: model.weekDiabtecPatientResult,
                    ),
                    BloodPressureMonthlyPage(
                      data: model.getBloodMonthlyTimeSeriesSales(),
                      diabtecPatientResult: model.monthDiabtecPatientResult,
                    ),
                    BloodPressureYearPage(
                      data: model.getBloodYearTimeSeriesSales(),
                      diabtecPatientResult: model.yearDiabtecPatientResult,
                    )
                  ],
                ),
              )
            ],
          ),
          floatingActionButton: InkWell(
            onTap: () {
              Navigator.push(context, FadePage(page: AddBloodPressurePage()));
            },
            child: Container(
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: HexColor('515B5D')),
              child: Center(
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}