import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
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 'calorie_result_page.dart';

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

class CalorieCalculator extends StatefulWidget {
  @override
  _CalorieCalculatorState createState() => _CalorieCalculatorState();
}

class _CalorieCalculatorState extends State<CalorieCalculator> {
  bool isMale = false;
  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 calories;
  String dropdownValue;

  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 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 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 calculateCalories() {
    if (isMale == true) {
      calories = 66.5 + (13.75 * weight) + (5.003 * height) - (6.755 * age);
    } else if (isMale == false) {
      calories =
          655.0955 + (9.5634 * weight) + (1.850 * height) - (4.676 * age);
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      isShowDecPage: false,
      appBarTitle:
          "${TranslationBase.of(context).calories} ${TranslationBase.of(context).calcHealth}",
      showHomeAppBarIcon: false,
      appBarIcons: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 7.0),
          child: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
        )
      ],
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
                child: Column(
                  //mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Texts(
                      TranslationBase.of(context).calorieCalcDesc,
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Texts(TranslationBase.of(context).gender),
                    SizedBox(
                      height: 8.0,
                    ),
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30.0),
                          color: Colors.white,
                          border: Border.all(
                            color: Colors.black45,
                          )),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  updateColor(1);
                                  isMale = false;
                                });
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 16),
                                decoration: BoxDecoration(
                                  color: maleCard,
                                  borderRadius: BorderRadius.circular(30.0),
                                ),
                                child: Center(
                                    child: Texts(
                                        TranslationBase.of(context).female)),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  updateColor(2);
                                  isMale = true;
                                });
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 16),
                                decoration: BoxDecoration(
                                  color: femaleCard,
                                  borderRadius: BorderRadius.circular(30.0),
                                ),
                                child: Center(
                                    child: Texts(
                                        TranslationBase.of(context).male)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 12.0,
                    ),
                    Texts(
                      TranslationBase.of(context).age11_120Years,
                    ),
                    Container(
                      margin:
                          EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.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,
                                foregroundDecoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5.0),
                                  border: Border.all(
                                    color: Colors.blueGrey,
                                    width: 2.0,
                                  ),
                                ),
                                child: Row(
                                  children: <Widget>[
                                    Expanded(
                                      child: Padding(
                                        padding: const EdgeInsets.all(4.0),
                                        child: Center(
                                          child: Text(age.toString()),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      padding:
                                          EdgeInsets.symmetric(horizontal: 4),
                                      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(
                      TranslationBase.of(context).height,
                    ),
                    Container(
                      margin:
                          EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.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: Padding(
                                        padding: const EdgeInsets.all(4.0),
                                        child: Center(
                                          child: Text(height.toString()),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      padding:
                                          EdgeInsets.symmetric(horizontal: 4.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(
                      TranslationBase.of(context).selectUnit,
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColorHeight(1);
                              });
                            },
                            child: Container(
                              padding: EdgeInsets.all(12),
                              margin: EdgeInsets.symmetric(horizontal: 8),
                              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(TranslationBase.of(context).cm)),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColorHeight(2);
                              });
                            },
                            child: Container(
                              padding: EdgeInsets.all(12),
                              margin: EdgeInsets.symmetric(horizontal: 8),
                              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(
                                          TranslationBase.of(context).feet))),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Texts(
                      TranslationBase.of(context).weight,
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Container(
                      margin:
                          EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.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(TranslationBase.of(context).selectUnit),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColorWeight(1);
                              });
                            },
                            child: Container(
                              padding: EdgeInsets.all(12),
                              margin: EdgeInsets.symmetric(horizontal: 8),
                              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(TranslationBase.of(context).kg)),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              setState(() {
                                updateColorWeight(2);
                              });
                            },
                            child: Container(
                              padding: EdgeInsets.all(12),
                              margin: EdgeInsets.symmetric(horizontal: 8),
                              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(
                                        TranslationBase.of(context).pound)),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Texts(TranslationBase.of(context).activityLevel),
                    Container(
                      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: 25.0,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
            child: SecondaryButton(
              label: TranslationBase.of(context).calculate,
              onTap: () {
                setState(() {
                  calculateCalories();
                  print(calories);
                  {
                    Navigator.push(
                      context,
                      FadePage(
                          page: CalorieResultPage(
                        calorie: calories,
                      )),
                    );
                  }
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}
