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/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';
class TodayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  BaseView<H2OViewModel>(
      onModelReady: (model) => model.getUserProgressForTodayData(),
      builder: (_, model, widget) => AppScaffold(
        isShowAppBar: false,
        appBarTitle: "Water Tracker",
        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: Column(
                        children: [
                          SizedBox(
                            height: 40,
                          ),
                          Text(
                            "Consumed",
                            style: TextStyle(fontSize: 20.0),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(model.userProgressData ==null ?"0.0":
                          model.userProgressData.quantityConsumed
                              .toString() + 'ml',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 20.0,
                                color: Hexcolor("#60BCF9")),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          SizedBox(
                            height: 5,
                            width: 50,
                            child: Container(

                            ),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            "Remaining",
                            style: TextStyle(fontSize: 20.0),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(model.userProgressData ==null ?"0.0":
                          (model.userProgressData.quantityLimit -
                              model.userProgressData
                                  .quantityConsumed) < 0 ? "0 ml" :
                          (model.userProgressData.quantityLimit -
                              model.userProgressData
                                  .quantityConsumed).toString() + ' ml',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 18.0),
                          ),
                        ],
                      ),
                    ),
                    circularStrokeCap: CircularStrokeCap.butt,
                    backgroundColor: Hexcolor("#D1E3F6"),
                    progressColor: Hexcolor("#60BCF9"),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Center(
                          child: Container(
                            margin: EdgeInsets.only(left: 20),
                            height: 30,
                            width: 70,
                            decoration: BoxDecoration(
                                color: Hexcolor("#D1E3F6"),
                                borderRadius: BorderRadius.all(
                                    Radius.circular(30))),
                          ),
                        ),
                        Text(
                          "Remaining % ",
                          style: TextStyle(fontSize: 20.0),
                        )
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Center(
                          child: Container(
                            margin: EdgeInsets.only(left: 20),
                            height: 30,
                            width: 70,
                            decoration: BoxDecoration(
                                color: Hexcolor("#60BCF9"),
                                borderRadius: BorderRadius.all(
                                    Radius.circular(30))),
                          ),
                        ),
                        Text(
                          "Consumed % ",
                          style: TextStyle(fontSize: 20.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,
        ),
      ),
    );
  }
}

