import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TimePickerWidget extends StatefulWidget {
  final Function(double) onChange;

  const TimePickerWidget({Key key, this.onChange}) : super(key: key);
  @override
  _TimePickerWidgetState createState() => _TimePickerWidgetState();
}

class _TimePickerWidgetState extends State<TimePickerWidget> with Trans {
  Widget durationPicker({bool inSeconds = false, bool inHundredths = false}) {
    double seconds = 0;
    return CupertinoPicker(
      scrollController: FixedExtentScrollController(initialItem: 0),
      backgroundColor: Colors.transparent,
      onSelectedItemChanged: (x) {
        if (inSeconds) {
          currentTimeInSec = x.toDouble();
        } else if (inHundredths) {
          currentTimeInDec = x.toDouble();
        } else {
          currentTimeInMin = x.toDouble();
        }
        seconds = currentTimeInMin * 60 + currentTimeInSec + currentTimeInDec / 100;
        //print("sec" + seconds.toStringAsFixed(2));
        setState(() {});
        widget.onChange(seconds);
      },
      children: List.generate(
          inSeconds
              ? 60
              : inHundredths
                  ? 100
                  : 60,
          (index) => Text(
              inSeconds
                  ? '$index sec'
                  : inHundredths
                      ? index.toString() + ' "'
                      : '$index min',
              style: TextStyle(color: Colors.yellow[200]))),
      itemExtent: 40,
    );
  }

  double currentTimeInSec = 0;
  double currentTimeInMin = 0;
  double currentTimeInDec = 0;
  @override
  Widget build(BuildContext context) {
    setContext(context);
    return Container(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              color: Colors.transparent,
              width: MediaQuery.of(context).size.width,
              child: Center(
                child: Container(
                    color: Colors.transparent,
                    width: MediaQuery.of(context).size.width * 0.95,
                    height: MediaQuery.of(context).size.height * 0.25,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(child: durationPicker()),
                        Expanded(child: durationPicker(inSeconds: true)),
                        Expanded(child: durationPicker(inHundredths: true)),
                      ],
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}