import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/body_fat/body_fat.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bmi_calculator.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/carbs/carbs.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/ovulation_period/ovulation_period.dart';
import 'package:diplomaticquarterapp/widgets/data_display/medical/medical_profile_item.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';

import 'health_calculator/bmi_calculator/bmi_calculator.dart';
import 'health_calculator/bmr_calculator/bmr_calculator.dart';
import 'health_calculator/calorie_calculator/calorie_calculator.dart';
import 'health_calculator/delivery_due/delivery_due.dart';
import 'health_calculator/ideal_body/ideal_body.dart';

class HealthCalculators extends StatefulWidget {
  @override
  _HealthCalculatorsState createState() => _HealthCalculatorsState();
}

class _HealthCalculatorsState extends State<HealthCalculators>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      appBarTitle: 'Health Calculators',
      body: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(70.0),
          child: Stack(
            children: [
              Center(
                child: Container(
                  height: 60.0,
                  margin: EdgeInsets.only(top: 10.0),
                  width: MediaQuery.of(context).size.width * 1.9,
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: Theme.of(context).dividerColor,
                        width: 5.7,
                      ),
                    ),
                    color: Colors.white,
                  ),
                  child: Center(
                    child: TabBar(
                      controller: _tabController,
                      isScrollable: true,
                      indicatorWeight: 4.0,
                      indicatorColor: Colors.red,
                      labelColor: Theme.of(context).primaryColor,
                      labelPadding:
                          EdgeInsets.symmetric(horizontal: 13.0, vertical: 2.0),
                      unselectedLabelColor: Colors.grey,
                      tabs: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width * 0.35,
                          child: Center(
                            child: Texts('General Health'),
                          ),
                        ),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.35,
                          child: Center(
                            child: Texts("Women's Health"),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
        body: Column(
          children: [
            Expanded(
              child: TabBarView(
                physics: BouncingScrollPhysics(),
                controller: _tabController,
                children: [
                  Container(
                    child: Column(
                      children: [
                        Container(
                          width: double.infinity,
                          height: 80,
                        ),
                        Row(
                          children: [
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(page: BMICalculator()),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'BMI',
                                  imagePath: 'bmi_health_calculator.png',
                                  subTitle: 'Calculators',
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: CalorieCalculator(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Calories',
                                  imagePath: 'calories-calculator.png',
                                  subTitle: 'Calculators',
                                ),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: BmrCalculator(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'BMR',
                                  imagePath: 'BMR_calculator.png',
                                  subTitle: 'Calculators',
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: IdealBody(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Ideal Body',
                                  imagePath: 'body_weight.png',
                                  subTitle: 'Weight',
                                ),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: BodyFat(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Body',
                                  imagePath: 'body_fat.png',
                                  subTitle: 'Fat',
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: Carbs(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Carbohydrate',
                                  imagePath: 'carb_protein.png',
                                  subTitle: 'Protein Fat',
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Container(
                    child: Column(
                      children: [
                        Container(
                          width: double.infinity,
                          height: 80,
                        ),
                        Row(
                          children: [
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(page: OvulationPeriod()),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Ovulation',
                                  imagePath: 'ovulation_period_icon.png',
                                  subTitle: 'Period',
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    FadePage(
                                      page: DeliveryDue(),
                                    ),
                                  );
                                },
                                child: MedicalProfileItem(
                                  title: 'Delivery',
                                  imagePath: 'delivery_date_icon.png',
                                  subTitle: 'Due Date',
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}