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 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'dart:math';

import '../health_calc_desc.dart';
import 'result_page.dart';

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

class BMICalculator extends StatefulWidget {
  @override
  _BMICalculatorState createState() => _BMICalculatorState();
}

class _BMICalculatorState extends State<BMICalculator> {
  TextEditingController textController = new TextEditingController();
  String textResult;
  String msg;
  double bmiResult;
  int height = 150;
  int weight = 40;
  Color cmCard = activeCardColor;
  Color ftCard = inactiveCardColor;
  Color lbCard = inactiveCardColor;
  Color kgCard = activeCardColor;

  void updateColor(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;
      }
    }
  }

  double convertToCm(double number) {
    return number * 30.48;
  }

  double convertToKg(double number) {
    return number / 2.205;
  }

  double calculateBMI() {
    if (ftCard == activeCardColor) {
      convertToCm(height.toDouble());
    }
    bmiResult = weight / pow(height / 100, 2);

    return bmiResult;
  }

  void showTextResult(BuildContext context) {
    if (bmiResult >= 30) {
      textResult = TranslationBase.of(context).obese;
    } else if (bmiResult < 30 && bmiResult >= 25) {
      textResult = TranslationBase.of(context).overWeight;
    } else if (bmiResult < 25 && bmiResult >= 18.5) {
      textResult = TranslationBase.of(context).healthy;
    } else if (bmiResult < 18.5) {
      textResult = TranslationBase.of(context).underWeight;
    }
  }

  void showMsg(BuildContext context) {
    if (bmiResult >= 30) {
      msg = TranslationBase.of(context).bmiCalcMsgObese;
    } else if (bmiResult < 30 && bmiResult >= 25) {
      msg = TranslationBase.of(context).bmiCalcMsgOverweight;
    } else if (bmiResult < 25 && bmiResult >= 18.5) {
      msg = TranslationBase.of(context).bmiCalcMsgHealthy;
    } else if (bmiResult < 18.5) {
      msg = TranslationBase.of(context).bmiCalcMsgUnderWeight;
    }
  }

  @override
  void initState() {
    super.initState();
    textController.text = '0'; // Setting the initial value for the field.
  }

  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      isShowDecPage: false,
      showHomeAppBarIcon: false,
      appBarIcons: [
        IconButton(
          icon: Icon(Icons.info_outline),
          color: Colors.white,
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => HealthDescPage(
                      "${TranslationBase.of(context).bmi} ${TranslationBase.of(context).calcHealth}",
                      TranslationBase.of(context).bmiCalcDesc,
                      "assets/images/AlHabibMedicalService/health_calculator/bmi.png")),
            );
          },
        )
      ],
      appBarTitle:
          "${TranslationBase.of(context).bmi} ${TranslationBase.of(context).calcHealth}",
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 15.0),
                  child: Text(
                    TranslationBase.of(context).bmiCalcDesc,
                    style: TextStyle(fontSize: 18.0),
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              padding: EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.0),
              ),
              child: Column(
                children: [
                  Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Texts(TranslationBase.of(context).height),
                      ),
                    ],
                  ),
                  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 > 120) height--;
                                          });
                                        },
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Slider(
                        value: height.toDouble(),
                        min: 120,
                        max: 250,
                        onChanged: (double newValue) {
                          setState(() {
                            height = newValue.round();
                          });
                        },
                        activeColor: Color(0xffC5272D),
                        inactiveColor: Color(0xffF3C5C6),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Texts(TranslationBase.of(context).selectUnit),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            updateColor(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: 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)),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            updateColor(2);
                          });
                        },
                        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(TranslationBase.of(context).feet)),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 25.0,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              padding: EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.0),
              ),
              child: Column(
                children: [
                  Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Texts(TranslationBase.of(context).weight),
                      ),
                    ],
                  ),
                  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 > 40) weight--;
                                          });
                                        },
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Slider(
                        value: weight.toDouble(),
                        min: 40,
                        max: 250,
                        onChanged: (double newValue) {
                          setState(() {
                            weight = newValue.round();
                          });
                        },
                        activeColor: Color(0xffC5272D),
                        inactiveColor: Color(0xffF3C5C6),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Texts(TranslationBase.of(context).selectUnit),
                      ),
                    ],
                  ),
                  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(TranslationBase.of(context).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(TranslationBase.of(context).pound)),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 25.0,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              padding: EdgeInsets.symmetric(vertical: 8),
              child: SecondaryButton(
                label: TranslationBase.of(context).calculate,
                onTap: () => {
                  setState(() {
                    calculateBMI();
                    showTextResult(context);
                    showMsg(context);
                    {
                      Navigator.push(
                        context,
                        FadePage(
                            page: ResultPage(
                          finalResult: bmiResult,
                          textResult: textResult,
                          msg: msg,
                        )),
                      );
                    }
                  })
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
