import 'package:diplomaticquarterapp/config/shared_pref_kay.dart';
import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/widgets/h20_floating_action_button.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:shared_preferences/shared_preferences.dart';

class TodayPage extends StatelessWidget {
  Future<bool> readPrefs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return (prefs.getString(H2O_UNIT) ?? "ml") == "ml" ? true : false;
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<H2OViewModel>(
      onModelReady: (model) => model.getUserProgressForTodayData(),
      builder: (_, model, widget) => AppScaffold(
        isShowAppBar: false,
        appBarTitle: TranslationBase.of(context).h2o,
        baseViewModel: model,
        body: SingleChildScrollView(
          padding: EdgeInsets.symmetric(vertical: 12),
          child: Container(
            margin: EdgeInsets.only(top: 60),
            child: Column(
              children: [
                Center(
                  child: CircularPercentIndicator(
                    radius: 180.0,
                    animation: true,
                    animationDuration: 1200,
                    lineWidth: 15.0,
                    percent: model.userProgressData == null
                        ? 0.0
                        : (model.userProgressData.percentageConsumed / 100) >= 1
                            ? 1
                            : (model.userProgressData.percentageConsumed / 100),
                    center: Center(
                      child: FutureBuilder<bool>(
                        future: readPrefs(),
                        builder: (context, data) {
                          var isUnitML = true;
                          String unit;
                          if (data.connectionState == ConnectionState.done) {
                            isUnitML = data.data;
                          }
                          if (isUnitML) {
                            unit = TranslationBase.of(context).ml;
                          } else {
                            unit = TranslationBase.of(context).l;
                          }
                          unit = unit.toLowerCase();
                          var totalH2O = model?.userProgressData?.quantityLimit ?? 0.0;
                          var consumedH2O = model?.userProgressData?.quantityConsumed ?? 0.0;
                          if (!isUnitML) {
                            totalH2O = totalH2O / 1000;
                            consumedH2O = consumedH2O / 1000;
                          }
                          var remainingH2O = totalH2O - consumedH2O;

                          return Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              // SizedBox(
                              //   height: 40,
                              // ),
                              Text(
                                TranslationBase.of(context).consumed,
                                style: TextStyle(fontSize: 16.0),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                model.userProgressData == null ? "0.0" : "$consumedH2O $unit",
                                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: HexColor("#60BCF9")),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              SizedBox(
                                height: 5,
                                width: 50,
                                child: Container(),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                TranslationBase.of(context).remaining,
                                style: TextStyle(fontSize: 16.0),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                model.userProgressData == null
                                    ? "0.0"
                                    : (remainingH2O) < 0
                                        ? "0 $unit"
                                        : '$remainingH2O $unit',
                                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                    circularStrokeCap: CircularStrokeCap.butt,
                    backgroundColor: HexColor("#D1E3F6"),
                    progressColor: HexColor("#60BCF9"),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 16),
                          height: 30,
                          width: 70,
                          decoration: BoxDecoration(color: HexColor("#D1E3F6"), borderRadius: BorderRadius.all(Radius.circular(30))),
                        ),
                        Text(
                          "${TranslationBase.of(context).remaining} %",
                          style: TextStyle(fontSize: 16.0),
                        )
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 16),
                          height: 30,
                          width: 70,
                          decoration: BoxDecoration(color: HexColor("#60BCF9"), borderRadius: BorderRadius.all(Radius.circular(30))),
                        ),
                        Text(
                          "${TranslationBase.of(context).consumed}  %",
                          style: TextStyle(fontSize: 16.0),
                        )
                      ],
                    )
                  ],
                ),
                SizedBox(
                  height: 30,
                ),
                SizedBox(
                  height: 0.5,
                  width: MediaQuery.of(context).size.width,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: H20FloatingActionButton(
          // controller: _controller,
          model: model,
        ),
      ),
    );
  }
}