import 'package:aitrainer_app/util/trans.dart';
import 'package:aitrainer_app/widgets/number_picker.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class WeightControl extends StatefulWidget {
  final Function(double) onTap;
  final double initialValue;
  const WeightControl({required this.onTap, required this.initialValue});
  @override
  _UnitQuantityControlState createState() => _UnitQuantityControlState();
}

class _UnitQuantityControlState extends State<WeightControl> with Trans {
  double? changedValue;
  @override
  Widget build(BuildContext context) {
    setContext(context);
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(31),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(alignment: AlignmentDirectional.topStart, children: <Widget>[
      Container(
          padding: EdgeInsets.only(left: 20, top: 24, right: 20, bottom: 30),
          margin: EdgeInsets.only(top: 30),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            boxShadow: [BoxShadow(color: Colors.black, offset: Offset(0, 10), blurRadius: 10)],
            image: DecorationImage(
              image: AssetImage('asset/image/WT_results_background.jpg'),
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          ),
          child: Column(mainAxisSize: MainAxisSize.min, children: [
            Text(
              t("Change the weight to"),
              textAlign: TextAlign.center,
              style: GoogleFonts.archivoBlack(
                fontSize: 24,
                color: Colors.yellow[100],
                shadows: <Shadow>[
                  Shadow(
                    offset: Offset(5.0, 5.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                  Shadow(
                    offset: Offset(-3.0, 3.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            NumberPickerWidget(
                minValue: (widget.initialValue - 30).round(),
                maxValue: (widget.initialValue + 30).round(),
                initalValue: widget.initialValue.round(),
                unit: t("kg"),
                color: Colors.yellow[50]!,
                onChange: (value) => {
                      setState(() {
                        changedValue = value;
                      })
                    }),
            Align(
                alignment: Alignment.center,
                child: GestureDetector(
                    onTap: () => {
                          if (changedValue == null)
                            {
                              changedValue = widget.initialValue,
                            },
                          Navigator.of(context).pop(),
                          widget.onTap(changedValue!),
                        },
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        Image.asset('asset/icon/gomb_orange_c.png', width: 100, height: 45),
                        Text(
                          t("OK"),
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ],
                    ))),
          ])),
      GestureDetector(
          onTap: () => Navigator.of(context).pop(),
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            radius: 28,
            child: Text(
              "X",
              style: GoogleFonts.archivoBlack(fontSize: 32, color: Colors.white54),
            ),
          )),
    ]);
  }
}