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

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

class BloodCholesterol extends StatefulWidget {
  @override
  _BloodCholesterolState createState() => _BloodCholesterolState();
}

class _BloodCholesterolState extends State<BloodCholesterol> {
  Color cardMGColor = inactiveCardColor;
  Color cardMMOLColor = inactiveCardColor;

  void updateColor(int type) {
    //MG/DLT card
    if (type == 1) {
      if (cardMGColor == inactiveCardColor) {
        cardMGColor = activeCardColor;
        cardMMOLColor = inactiveCardColor;
      } else {
        cardMGColor = inactiveCardColor;
      }
    }
    if (type == 2) {
      if (cardMMOLColor == inactiveCardColor) {
        cardMMOLColor = activeCardColor;
        cardMGColor = inactiveCardColor;
      } else {
        cardMMOLColor = inactiveCardColor;
      }
    }
  }

  void calculateBloodCholesterol() {
    if (cardMGColor == activeCardColor) {
      inputValue = double.parse(textController.text);
      inputValue = inputValue / conversionConst;
      unit = 'mmol/l';
    } else if (cardMMOLColor == activeCardColor) {
      inputValue = double.parse(textController.text);
      inputValue = inputValue * conversionConst;
      unit = 'mg/dlt';
    }
  }

  bool _visible = false;
  TextEditingController textController = new TextEditingController();
  String finalValue;

  double inputValue = 0.0;
  String unit;
  double conversionConst = 38.67;

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      appBarTitle: 'Blood Cholesterol ',
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height * 0.7,
            child: Column(
              //crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 350.0,
                  child: Text(
                    'Convert blood cholesterol from\n mmol/l to mg/dlt and vice versa.',
                    //textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Container(
                  color: Colors.white,
                  height: 120.0,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      //crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 15.0),
                          child: Row(
                            children: [
                              Texts(
                                'Convert from',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 9.0,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            GestureDetector(
                              onTap: () {
                                setState(() {
                                  updateColor(1);
                                  inputValue =
                                      double.parse(textController.text);
                                  inputValue = inputValue / conversionConst;
                                  unit = 'mmol/l';
                                });
                              },
                              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: cardMGColor,
                                  borderRadius: BorderRadius.circular(3.0),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 0.0, horizontal: 18.0),
                                  child: Texts('MG/DLt TO \nMMOL/L'),
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: () {
                                setState(() {
                                  updateColor(2);
                                  inputValue =
                                      double.parse(textController.text);
                                  inputValue = inputValue * conversionConst;
                                  unit = 'mg/dlt';
                                });
                              },
                              child: Container(
                                height: 55.0,
                                width: 150.0,
                                decoration: BoxDecoration(
                                  color: cardMMOLColor,
                                  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: Texts('MG/DLt TO\n MMOL/L'),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 25.0,
                ),
                Container(
                  height: 65.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6.0),
                    color: Colors.white,
                  ),
                  child: TextFormField(
                    controller: textController,
                    inputFormatters: <TextInputFormatter>[
//                      FilteringTextInputFormatter.digitsOnly
                    ],
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black45)),
                      labelText: "   Enter the reading value",
                      labelStyle: TextStyle(
                        color: Colors.black87,
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 25.0,
                ),
                Visibility(
                  visible: _visible,
                  child: Container(
                    height: 95.0,
                    width: 350.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: Colors.black),
                      borderRadius: BorderRadius.circular(15.0),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Texts('Result:'),
                          Row(
                            children: [
                              Text(
                                inputValue.toStringAsFixed(3).toString(),
                                style: TextStyle(fontSize: 35.0),
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 4.0, top: 10.0),
                                child: Text(
                                  unit.toString(),
                                  style: TextStyle(
                                    color: Color(0xffC5273A),
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Flexible(
                  child: Container(
                    height: 100.0,
                    width: 150.0,
                    child: Button(
                      label: 'CALCULATE',
                      onTap: () {
                        setState(() {
                          _visible == false
                              ? _visible = !_visible
                              : _visible = _visible;
                          calculateBloodCholesterol();
                        });
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}