diplomatic-quarter/lib/pages/AlHabibMedicalService/h2o/today_page.dart

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/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.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';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

import 'Dialog/confirm_add_amount_dialog.dart';
import 'add_custom_amount.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(
          physics: BouncingScrollPhysics(),
          padding: EdgeInsets.all(21),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 320,
                child: Row(
                  children: [
                    Expanded(
                      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();
                          double totalH2O = model?.userProgressData?.quantityLimit ?? 0.0;
                          double consumedH2O = model?.userProgressData?.quantityConsumed ?? 0.0;
                          if (!isUnitML) {
                            totalH2O = totalH2O / 1000;
                            consumedH2O = consumedH2O / 1000;
                          }

                          if (consumedH2O > totalH2O) {
                            consumedH2O = totalH2O;
                          }

                          double divide = consumedH2O / totalH2O;
                          String percentage = (divide * 100).toStringAsFixed(0);
                          var remainingH2O = totalH2O - consumedH2O;

                          return AspectRatio(
                            aspectRatio: 234 / 320,
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(18),
                                  child: WaveWidget(
                                    config: CustomConfig(
                                      colors: [Color(0xff0d47a1), Color(0xff1976d2), Color(0xff2196f3)],
                                      durations: [19440, 10800, 6000],
                                      heightPercentages: [1 - divide - .10, 1 - divide - .05, 1 - divide],
                                      blur: MaskFilter.blur(BlurStyle.solid, 0),
                                    ),
                                    waveAmplitude: 0,
                                    backgroundColor: Color(0xff2e303a),
                                    size: Size(
                                      double.infinity,
                                      double.infinity,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 12, bottom: 12),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        remainingH2O.toStringAsFixed(0) + "$unit " + TranslationBase.of(context).left.toLowerCase(),
                                        style: TextStyle(
                                          fontSize: 14,
                                          fontWeight: FontWeight.w600,
                                          color: Colors.white,
                                          letterSpacing: -0.56,
                                        ),
                                      ),
                                      Column(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          Text(
                                            "$percentage%",
                                            style: TextStyle(
                                              fontSize: 34,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.white,
                                              letterSpacing: -2.34,
                                            ),
                                          ),
                                          Text(
                                            TranslationBase.of(context).consumed,
                                            style: TextStyle(
                                              fontSize: 14,
                                              fontWeight: FontWeight.w600,
                                              color: Colors.white,
                                              letterSpacing: -0.56,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                    SizedBox(width: 21),
                    SizedBox(
                      height: double.infinity,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          _circularButton(context, 600, model),
                          SizedBox(height: 8),
                          _circularButton(context, 330, model),
                          SizedBox(height: 8),
                          _circularButton(context, 200, model),
                          // SizedBox(height: 8),
                          // _circularButton(context, 0, model, isCustom: true),
                          SizedBox(height: 8),
                          InkWell(
                            onTap: () => undoVolume(context, model),
                            child: Text(
                              TranslationBase.of(context).undo,
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w600,
                                color: Color(0xffD02127),
                                letterSpacing: -0.56,
                                decoration: TextDecoration.underline,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: 40),
              // Text(
              //   TranslationBase.of(context).addCustomAmount,
              //   style: TextStyle(
              //     fontSize: 14,
              //     height: 21 / 14,
              //     fontWeight: FontWeight.w600,
              //     color: Color(0xff2B353E),
              //     letterSpacing: -0.56,
              //   ),
              // ),

            ],
          ),
        ),
        // floatingActionButton: H20FloatingActionButton(
        //   // controller: _controller,
        //   model: model,
        // ),
      ),
    );
  }

  Widget _circularButton(context, int value, model, {bool isCustom = false}) {
    String _text = "$value${TranslationBase.of(context).ml}";
    if (isCustom) {
      _text = TranslationBase.of(context).custom;
    }
    return InkWell(
      onTap: () {
        if (isCustom) {
          Navigator.push(
            context,
            FadePage(
              page: AddCustomAmount(
                model: model,
              ),
            ),
          );
        } else {
          showConfirmMessage(context, value, model);
        }
      },
      child: Container(
        padding: EdgeInsets.all(21),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          border: Border.all(width: 1, color: Color(0xffDEDEDE)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              TranslationBase.of(context).add,
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w500,
                color: Color(0xff575757),
                letterSpacing: -0.44,
              ),
            ),
            Text(
              _text,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: Color(0xff2E303A),
                letterSpacing: -0.56,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void showConfirmMessage(context, int amount, H2OViewModel model) {
    showDialog(
      context: context,
      child: ConfirmAddAmountDialog(
        model: model,
        amount: amount,
      ),
    );
  }

  void undoVolume(context, H2OViewModel model) async {
    GifLoaderDialogUtils.showMyDialog(context);
    await model.undoUserActivity();
    GifLoaderDialogUtils.hideDialog(context);
  }
}