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 'ideal_body_result_page.dart';

const activeCardColor = Color(0xff70777A);
const inactiveCardColor = Color(0xffFAFAFd);

class IdealBody extends StatefulWidget {
  @override
  _IdealBodyState createState() => _IdealBodyState();
}

class _IdealBodyState extends State<IdealBody> {
  bool isMale = false;
  bool isHeightCm = true;

  Color kgCard = activeCardColor;
  Color lbCard = inactiveCardColor;
  Color cmCard = activeCardColor;
  Color ftCard = inactiveCardColor;
  int age = 0;
  int height = 0;
  double heightInches;
  double minRange;
  double maxRange;
  double overWeightBy;
  int weight = 0;
  double idealWeight = 0;
  String dropdownValue = 'Medium(fingers touch)';
  double calories = 0;
  String textResult = '';
  double maxIdealWeight;
  double heightFeet;

  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 calculateIdealWeight() {
    heightInches = height * .39370078740157477;
    heightFeet = heightInches / 12;
    idealWeight = (50 + 2.3 * (heightInches - 60));
    if (dropdownValue == 'Small(fingers overlap)') {
      idealWeight = idealWeight - 10;
    } else if (dropdownValue == 'Medium(fingers touch)') {
      idealWeight = idealWeight;
    } else if (dropdownValue == 'Large(fingers don\'n touch)') {
      idealWeight = idealWeight + 10;
    }

    maxIdealWeight = (((idealWeight) * 1.1).round() * 100) / 100;
    overWeightBy = weight - maxIdealWeight.roundToDouble();
    minRange = ((idealWeight / 1.1) * 10).round() / 10;
    maxRange = maxIdealWeight;
    idealWeight = idealWeight;
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      appBarTitle: 'Ideal Body Weight',
      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(vertical: 15.0, horizontal: 25.0),
        child: SingleChildScrollView(
          child: Container(
            height: 800.0,
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Texts(
                    'Calculates the ideal body weight based on height, Weight, and Body Size',
                  ),
                ),
                Divider(
                  thickness: 2.0,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Texts(
                      'Height',
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: 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: 45.0,
                    ),
                    Divider(
                      thickness: 2.0,
                    ),
                    Texts(
                      'Weight',
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: 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('Body Frame Size'),
                    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>[
                          'Small(fingers overlap)',
                          'Medium(fingers touch)',
                          'Large(fingers don\'n touch)',
                        ].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();
                            calculateIdealWeight();

                            print(idealWeight);
                            //print(overWeightBy);
                            {
                              Navigator.push(
                                context,
                                FadePage(
                                    page: IdealBodyResult(
                                  idealBodyWeight: idealWeight,
                                  minRange: minRange,
                                  mixRange: maxRange,
                                  overWeightBy: overWeightBy,
                                  textResult: textResult,
                                )),
                              );
                            }
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
