import 'package:diplomaticquarterapp/uitl/date_uitl.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:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:intl/intl.dart';
import 'package:jiffy/jiffy.dart';

import 'ovulation_result_page.dart';

class OvulationPeriod extends StatefulWidget {
  @override
  _OvulationPeriodState createState() => _OvulationPeriodState();
}

class _OvulationPeriodState extends State<OvulationPeriod> {
  DateTime bloodSugarDate = DateTime.now();
  DateTime timeSugarDate = DateTime.now();
  DateTime selectedDateTime = DateTime.now();
  int cycleLength = 0;
  int lutealPhaseLength = 0;
  String selectedDate;
  var dateFrom = DateTime.now();
  var babyAgeWeeks;
  var babyAgeDays;
  var dateTo = DateTime.now();
  var conceivedDate = DateTime.now();
  var deliveryDue = DateTime.now();
  var dt = DateTime.now();
  var newFormat = DateFormat("yy-MM-dd");
  String updatedDt;

  String getTime() {
    return " ${timeSugarDate.hour}:${timeSugarDate.minute}";
  }

  String getDate() {
    return "${DateUtil.getMonth(selectedDateTime.month)} ${selectedDateTime.day}, ${selectedDateTime.year}";
  }

  // void calculate() {}
  //
  // void calculateFertility(DateTime selectedDate) {const diff = Date.}

  calculateBabyInformation() {
    setState(() {
      bloodSugarDate = selectedDateTime;
      dateFrom = selectedDateTime.add(Duration(days: 10));
      updatedDt = DateFormat.yMMMEd().format(dateFrom);
      dateTo = selectedDateTime.add(Duration(days: 20));
      conceivedDate = selectedDateTime.add(Duration(days: 14));
      deliveryDue = selectedDateTime.add(Duration(days: 280));

      // babyAge = Jiffy([DateTime.now()]).diff(Jiffy([date]), Units.WEEK);
      babyAgeWeeks = Jiffy([DateTime.now().year, DateTime.now().month, DateTime.now().day])
          .diff(Jiffy([selectedDateTime.year, selectedDateTime.month, dateTo.day]), Units.WEEK);
      babyAgeDays = Jiffy([DateTime.now().year, DateTime.now().month, DateTime.now().day])
          .diff(Jiffy([selectedDateTime.year, selectedDateTime.month, dateTo.day]), Units.DAY);
    });
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      isShowAppBar: true,
      appBarTitle: 'Ovulation Period',
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 25.0, vertical: 15.0),
        child: SingleChildScrollView(
          child: Container(
            height: 700.0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Texts('Calculates Ovulation Period'),
                SizedBox(
                  height: 12.0,
                ),
                Divider(
                  //height: 2,
                  thickness: 2,
                ),
                SizedBox(
                  height: 12.0,
                ),
                InkWell(
                  onTap: () {
                    DatePicker.showDatePicker(
                      context,
                      showTitleActions: true,
                      minTime: DateTime(DateTime.now().year - 1, 1, 1),
                      maxTime: DateTime.now(),
                      onConfirm: (date) {
                        print('confirm $date');
                        setState(() {
                          selectedDateTime = date;
                        });
                      },
                      currentTime: DateTime.now(),
                    );
                  },
                  child: Container(
                    padding: EdgeInsets.all(12),
                    width: double.infinity,
                    height: 65,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(12), color: Colors.white),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Texts('Date'),
                        Texts(getDate()),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 5.0,
                ),
                Texts(
                  'Average Cycle Length (usually 28 days):',
                  fontWeight: FontWeight.w400,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: [
                    Container(
                      width: 340.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                        color: Colors.white,
                      ),
                      child: Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                            child: Center(
                              child: Container(
                                width: 60.0,
                                foregroundDecoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5.0),
                                  border: Border.all(
                                    color: Colors.blueGrey,
                                    width: 2.0,
                                  ),
                                ),
                                child: Row(
                                  children: <Widget>[
                                    Expanded(
                                      child: Center(
                                        child: Text(cycleLength.toString()),
                                      ),
                                    ),
                                    Container(
                                      height: 38.0,
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(
                                            decoration: BoxDecoration(
                                              border: Border(
                                                bottom: BorderSide(
                                                  width: 0.5,
                                                ),
                                              ),
                                            ),
                                            child: InkWell(
                                              child: Icon(
                                                Icons.arrow_drop_up,
                                                size: 18.0,
                                              ),
                                              onTap: () {
                                                setState(() {
                                                  if (cycleLength < 45) cycleLength++;
                                                });
                                              },
                                            ),
                                          ),
                                          InkWell(
                                            child: Icon(
                                              Icons.arrow_drop_down,
                                              size: 18.0,
                                            ),
                                            onTap: () {
                                              setState(() {
                                                if (cycleLength > 0) cycleLength--;
                                              });
                                            },
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Slider(
                              value: cycleLength.toDouble(),
                              min: 0,
                              max: 45,
                              onChanged: (double newValue) {
                                setState(() {
                                  cycleLength = newValue.round();
                                });
                              },
                              activeColor: Color(0xffC5272D),
                              inactiveColor: Color(0xffF3C5C6),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Texts(
                  'Average Luteal Phase Length (usually 14 days):',
                  fontWeight: FontWeight.w400,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: [
                    Container(
                      width: 340.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                        color: Colors.white,
                      ),
                      child: Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
                            child: Center(
                              child: Container(
                                width: 60.0,
                                foregroundDecoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5.0),
                                  border: Border.all(
                                    color: Colors.blueGrey,
                                    width: 2.0,
                                  ),
                                ),
                                child: Row(
                                  children: <Widget>[
                                    Expanded(
                                      child: Center(
                                        child: Text(lutealPhaseLength.toString()),
                                      ),
                                    ),
                                    Container(
                                      height: 38.0,
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.center,
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          Container(
                                            decoration: BoxDecoration(
                                              border: Border(
                                                bottom: BorderSide(
                                                  width: 0.5,
                                                ),
                                              ),
                                            ),
                                            child: InkWell(
                                              child: Icon(
                                                Icons.arrow_drop_up,
                                                size: 18.0,
                                              ),
                                              onTap: () {
                                                setState(() {
                                                  if (lutealPhaseLength < 15) lutealPhaseLength++;
                                                });
                                              },
                                            ),
                                          ),
                                          InkWell(
                                            child: Icon(
                                              Icons.arrow_drop_down,
                                              size: 18.0,
                                            ),
                                            onTap: () {
                                              setState(() {
                                                if (lutealPhaseLength > 0) lutealPhaseLength--;
                                              });
                                            },
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Slider(
                              value: lutealPhaseLength.toDouble(),
                              min: 0,
                              max: 15,
                              onChanged: (double newValue) {
                                setState(() {
                                  lutealPhaseLength = newValue.round();
                                });
                              },
                              activeColor: Color(0xffC5272D),
                              inactiveColor: Color(0xffF3C5C6),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 220.0,
                ),
                Container(
                  height: 50.0,
                  width: 350.0,
                  child: SecondaryButton(
                    label: 'CALCULATE',
                    onTap: () {
                      calculateBabyInformation();
                      Navigator.push(
                        context,
                        FadePage(
                            page: OvulationResult(
                          conceivedDate: conceivedDate,
                          dateFrom: dateFrom,
                          dateTo: dateTo,
                          deliveryDue: deliveryDue,
                          babyAge: babyAgeWeeks,
                          babyAgeDays: babyAgeDays,
                        )),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
