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,
        ),
      ),
    );
  }
}