import 'package:diameter/components/forms.dart';
import 'package:diameter/config.dart';
import 'package:diameter/settings.dart';
import 'package:diameter/utils/utils.dart';
import 'package:flutter/material.dart';

class LogEntryForm extends StatefulWidget {
  final GlobalKey<FormState> formState;
  final Map<String, TextEditingController> controllers;

  const LogEntryForm(
      {Key? key, required this.formState, required this.controllers})
      : super(key: key);

  @override
  _LogEntryFormState createState() => _LogEntryFormState();
}

class _LogEntryFormState extends State<LogEntryForm> {
  @override
  Widget build(BuildContext context) {
    final _timeController = widget.controllers['time'];
    final _mgPerDlController = widget.controllers['mgPerDl'];
    final _mmolPerLController = widget.controllers['mmolPerL'];
    final _bolusGlucoseController = widget.controllers['bolusGlucose'];
    final _delayedBolusRateController = widget.controllers['delayedBolusRate'];
    final _delayedBolusDurationController =
        widget.controllers['delayedBolusDuration'];
    final _notesController = widget.controllers['notes'];

    return SingleChildScrollView(
      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <
          Widget>[
        StyledForm(
          formState: widget.formState,
          fields: [
            // TODO: insert time picker
            // Expanded(
            //   child: StyledTimeOfDayFormField(
            //     label: 'Time',
            //     controller: _timeController,
            //     onChanged: (newEndTime) {
            //       if (newEndTime != null) {
            //         setState(() {
            //           _endTime = newEndTime;
            //         });
            //         updateEndTime();
            //       }
            //),
            Row(
              // TODO: improve conversion of mg/dl and mmol/l
              // TODO: display according to settings
              children: [
                glucoseMeasurement == GlucoseMeasurement.mgPerDl ||
                        glucoseDisplayMode == GlucoseDisplayMode.both ||
                        glucoseDisplayMode == GlucoseDisplayMode.bothForDetail
                    ? Expanded(
                        child: TextFormField(
                          decoration: const InputDecoration(
                            labelText: 'mg/dl',
                            suffixText: 'mg/dl',
                          ),
                          controller: _mgPerDlController,
                          keyboardType: const TextInputType.numberWithOptions(),
                          validator: (value) {
                            if (value!.trim().isEmpty &&
                                _mmolPerLController!.text.trim().isEmpty) {
                              return 'How many mg/dl or mmol/l does the rate make up for?';
                            }
                            return null;
                          },
                        ),
                      )
                    : Container(),
                glucoseMeasurement == GlucoseMeasurement.mmolPerL ||
                        glucoseDisplayMode == GlucoseDisplayMode.both ||
                        glucoseDisplayMode == GlucoseDisplayMode.bothForDetail
                    ? Expanded(
                        child: TextFormField(
                          decoration: const InputDecoration(
                            labelText: 'mmol/l',
                            suffixText: 'mmol/l',
                            alignLabelWithHint: true,
                          ),
                          controller: _mmolPerLController,
                          onChanged: (_) {
                            setState(() {
                              _mgPerDlController!.text =
                                  Utils.convertMmolPerLToMgPerDl(
                                          double.tryParse(
                                                  _mgPerDlController.text) ??
                                              0)
                                      .toString();
                            });
                          },
                          keyboardType: const TextInputType.numberWithOptions(
                              decimal: true),
                          validator: (value) {
                            if (value!.trim().isEmpty &&
                                _mgPerDlController!.text.trim().isEmpty) {
                              return 'How many mg/dl or mmol/l does rhe rate make up for?';
                            }
                            return null;
                          },
                        ),
                      )
                    : Container(),
              ],
            ),
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'Bolus Units',
                suffixText: 'U',
              ),
              controller: _bolusGlucoseController,
              keyboardType:
                  const TextInputType.numberWithOptions(decimal: true),
            ),
            // TODO: change field functionality according to time format
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'Delayed Bolus Duration',
                suffixText: ' min',
              ),
              controller: _delayedBolusDurationController,
              keyboardType: TextInputType.number,
            ),
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'Delayed Bolus Units',
              ),
              controller: _delayedBolusRateController,
              keyboardType:
                  const TextInputType.numberWithOptions(decimal: true),
            ),
            TextFormField(
              controller: _notesController,
              decoration: const InputDecoration(
                labelText: 'Notes',
                alignLabelWithHint: true,
              ),
              keyboardType: TextInputType.multiline,
            ),
          ],
          // buttons: [
          //   ElevatedButton(
          //     onPressed: handleCancelAction,
          //     child: const Text('CANCEL'),
          //   ),
          //   ElevatedButton(
          //     onPressed: handleSaveAction,
          //     child: const Text('SAVE'),
          //   ),
          // ],
        ),
      ]),
    );
  }
}