import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.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/material.dart';
import 'dart:math';

import 'bmr_result_page.dart';

const activeCardColorGender = Color(0xffC5272D);
const inactiveCardColorGender = Color(0xffFAFAFd);
const activeCardColor = Color(0xff70777A);
const inactiveCardColor = Color(0xffFAFAFd);

class BmrCalculator extends StatefulWidget {
  @override
  _BmrCalculatorState createState() => _BmrCalculatorState();
}

class _BmrCalculatorState extends State<BmrCalculator> {
  bool isMale = false;
  bool isHeightCm = true;
  Color maleCard = activeCardColorGender;
  Color femaleCard = inactiveCardColorGender;
  Color kgCard = activeCardColor;
  Color lbCard = inactiveCardColor;
  Color cmCard = activeCardColor;
  Color ftCard = inactiveCardColor;
  int age = 0;
  int height = 0;
  int weight = 0;
  double bmrResult = 0;
  String dropdownValue = 'Lighty Active (1-3) days per week';
  double calories = 0;

  void updateColor(int type) {
    //MG/DLT card
    if (type == 1) {
      if (maleCard == inactiveCardColorGender) {
        maleCard = activeCardColorGender;
        femaleCard = inactiveCardColorGender;
      } else {
        maleCard = inactiveCardColorGender;
      }
    }
    if (type == 2) {
      if (femaleCard == inactiveCardColorGender) {
        femaleCard = activeCardColorGender;
        maleCard = inactiveCardColorGender;
      } else {
        femaleCard = inactiveCardColorGender;
      }
    }
  }

  void updateColorHeight(int type) {
    //MG/DLT card
    if (type == 1) {
      if (cmCard == inactiveCardColor) {
        cmCard = activeCardColor;
        ftCard = inactiveCardColor;
      } else {
        cmCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (ftCard == inactiveCardColor) {
        ftCard = activeCardColor;
        cmCard = inactiveCardColor;
      } else {
        ftCard = inactiveCardColor;
      }
    }
  }

  void updateColorWeight(int type) {
    //MG/DLT card
    if (type == 1) {
      if (kgCard == inactiveCardColor) {
        kgCard = activeCardColor;
        lbCard = inactiveCardColor;
      } else {
        kgCard = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (lbCard == inactiveCardColor) {
        lbCard = activeCardColor;
        kgCard = inactiveCardColor;
      } else {
        lbCard = inactiveCardColor;
      }
    }
  }

  void calculateBmr() {
    if (isMale == true) {
      bmrResult = 66.5 + (13.75 * weight) + (5.003 * height) - (6.755 * age);
    } else if (isMale == false) {
      bmrResult =
          655.0955 + (9.5634 * weight) + (1.850 * height) - (4.676 * age);
    }

    bmrResult = bmrResult.roundToDouble();
  }

  void calculateCalories() {
    if (dropdownValue == "Almost Inactive(Little or no exercises)") {
      calories = bmrResult * 1.2;
    } else if (dropdownValue == "Lighty Active (1-3) days per week") {
      calories = bmrResult * 1.375;
    } else if (dropdownValue == "very Active(6-7) days per week") {
      calories = bmrResult * 1.55;
    } else if (dropdownValue == "Super Active(very hard exercises)") {
      calories = bmrResult * 1.725;
    } else if (dropdownValue == "") {
      calories = bmrResult * 10.725;
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      isShowDecPage: false,
      appBarTitle: 'Bmr Calculator',
      showHomeAppBarIcon: false,
      appBarIcons: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 7.0),
          child: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
        )
      ],
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 25.0, vertical: 15.0),
        child: SingleChildScrollView(
          child: Container(
            height: 850,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Texts(
                      'Calculates the amount of energy that the person’s body expends in a day'),
                ),
                Divider(
                  thickness: 2.0,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Texts('Gender'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Container(
                      width: 350,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(35.0),
                          color: Colors.white,
                          border: Border.all(
                            color: Colors.black45,
                          )),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColor(1);
                                isMale = false;
                              });
                            },
                            child: Container(
                              height: 55.0,
                              width: 170.0,
                              decoration: BoxDecoration(
                                color: maleCard,
                                borderRadius: BorderRadius.circular(35.0),
                              ),
                              child: Center(child: Texts('FEMALE')),
                            ),
                          ),
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColor(2);
                                isMale = true;
                              });
                            },
                            child: Container(
                              height: 55.0,
                              width: 170.0,
                              decoration: BoxDecoration(
                                color: femaleCard,
                                borderRadius: BorderRadius.circular(35.0),
                              ),
                              child: Center(child: Texts('MALE')),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Texts(
                      'The Age ( 11 - 120 ) yrs',
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Row(
                      children: [
                        Container(
                          width: 340.0,
                          height: 60.0,
                          decoration: BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.0, horizontal: 8.0),
                                child: Center(
                                  child: Container(
                                    width: 60.0,
                                    foregroundDecoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5.0),
                                      border: Border.all(
                                        color: Colors.blueGrey,
                                        width: 2.0,
                                      ),
                                    ),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          child: Center(
                                            child: Text(age.toString()),
                                          ),
                                        ),
                                        Container(
                                          height: 38.0,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              Container(
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                    bottom: BorderSide(
                                                      width: 0.5,
                                                    ),
                                                  ),
                                                ),
                                                child: InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_up,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (age < 120) age++;
                                                    });
                                                  },
                                                ),
                                              ),
                                              InkWell(
                                                child: Icon(
                                                  Icons.arrow_drop_down,
                                                  size: 18.0,
                                                ),
                                                onTap: () {
                                                  setState(() {
                                                    if (age > 0) age--;
                                                  });
                                                },
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Slider(
                                  value: age.toDouble(),
                                  min: 0,
                                  max: 120,
                                  onChanged: (double newValue) {
                                    setState(() {
                                      age = newValue.round();
                                    });
                                  },
                                  activeColor: Color(0xffC5272D),
                                  inactiveColor: Color(0xffF3C5C6),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Texts(
                      'Height',
                    ),
                    Row(
                      children: [
                        Container(
                          width: 340.0,
                          height: 60.0,
                          decoration: BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.0, horizontal: 8.0),
                                child: Center(
                                  child: Container(
                                    width: 60.0,
                                    foregroundDecoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5.0),
                                      border: Border.all(
                                        color: Colors.blueGrey,
                                        width: 2.0,
                                      ),
                                    ),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          child: Center(
                                            child: Text(height.toString()),
                                          ),
                                        ),
                                        Container(
                                          height: 38.0,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              Container(
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                    bottom: BorderSide(
                                                      width: 0.5,
                                                    ),
                                                  ),
                                                ),
                                                child: InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_up,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (height < 250)
                                                        height++;
                                                    });
                                                  },
                                                ),
                                              ),
                                              InkWell(
                                                child: Icon(
                                                  Icons.arrow_drop_down,
                                                  size: 18.0,
                                                ),
                                                onTap: () {
                                                  setState(() {
                                                    if (height > 0) height--;
                                                  });
                                                },
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Slider(
                                  value: height.toDouble(),
                                  min: 0,
                                  max: 250,
                                  onChanged: (double newValue) {
                                    setState(() {
                                      height = newValue.round();
                                    });
                                  },
                                  activeColor: Color(0xffC5272D),
                                  inactiveColor: Color(0xffF3C5C6),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHeight(1);
                              isHeightCm = true;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                              color: cmCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('CM')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorHeight(2);
                              isHeightCm = false;
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: ftCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('Ft')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Texts(
                      'Weight',
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      children: [
                        Container(
                          width: 340.0,
                          height: 60.0,
                          decoration: BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.0, horizontal: 8.0),
                                child: Center(
                                  child: Container(
                                    width: 60.0,
                                    foregroundDecoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5.0),
                                      border: Border.all(
                                        color: Colors.blueGrey,
                                        width: 2.0,
                                      ),
                                    ),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          child: Center(
                                            child: Text(weight.toString()),
                                          ),
                                        ),
                                        Container(
                                          height: 38.0,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              Container(
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                    bottom: BorderSide(
                                                      width: 0.5,
                                                    ),
                                                  ),
                                                ),
                                                child: InkWell(
                                                  child: Icon(
                                                    Icons.arrow_drop_up,
                                                    size: 18.0,
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      if (weight < 250)
                                                        weight++;
                                                    });
                                                  },
                                                ),
                                              ),
                                              InkWell(
                                                child: Icon(
                                                  Icons.arrow_drop_down,
                                                  size: 18.0,
                                                ),
                                                onTap: () {
                                                  setState(() {
                                                    if (weight > 0) weight--;
                                                  });
                                                },
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Slider(
                                  value: weight.toDouble(),
                                  min: 0,
                                  max: 250,
                                  onChanged: (double newValue) {
                                    setState(() {
                                      weight = newValue.round();
                                    });
                                  },
                                  activeColor: Color(0xffC5272D),
                                  inactiveColor: Color(0xffF3C5C6),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Texts('Select Unit'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorWeight(1);
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                              color: kgCard,
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  vertical: 0.0, horizontal: 18.0),
                              child: Center(child: Texts('KG')),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              updateColorWeight(2);
                            });
                          },
                          child: Container(
                            height: 55.0,
                            width: 150.0,
                            decoration: BoxDecoration(
                              color: lbCard,
                              borderRadius: BorderRadius.circular(3.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 3,
                                  blurRadius: 7,
                                  offset: Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16.0),
                              child: Center(child: Texts('LB')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 45.0,
                    ),
                    Divider(
                      thickness: 2.0,
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Texts('Activity level'),
                    Container(
                      width: 300,
                      child: DropdownButton<String>(
                        value: dropdownValue,
                        icon: Icon(Icons.arrow_downward),
                        iconSize: 24,
                        elevation: 16,
                        style: TextStyle(color: Colors.black87),
                        underline: Container(
                          height: 2,
                          color: Colors.black54,
                        ),
                        onChanged: (String newValue) {
                          setState(() {
                            dropdownValue = newValue;
                          });
                        },
                        items: <String>[
                          'Almost Inactive(Little or no exercises)',
                          'Lighty Active (1-3) days per week',
                          'very Active(6-7) days per week',
                          'Super Active(very hard exercises)'
                        ].map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                          );
                        }).toList(),
                      ),
                    ),
                    SizedBox(
                      height: 30.0,
                    ),
                    Container(
                      height: 50.0,
                      width: 350.0,
                      child: SecondaryButton(
                        label: 'CALCULATE',
                        onTap: () {
                          setState(() {
                            calculateBmr();
                            calculateCalories();

                            {
                              Navigator.push(
                                context,
                                FadePage(
                                    page: BmrResultPage(
                                  bmrResult: bmrResult,
                                  calories: calories,
                                )),
                              );
                            }
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
