import 'dart:math' as math;

import 'package:diplomaticquarterapp/core/model/AlHabibMedicalService/H2O/insert_user_activity_request_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/Dialog/confirm_add_amount_dialog.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';

import '../add_custom_amount.dart';

class H20FloatingActionButton extends StatefulWidget {
  const H20FloatingActionButton({Key key, @required AnimationController controller, @required this.model}) : super(key: key);

  final H2OViewModel model;

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

class _H20FloatingActionButtonState extends State<H20FloatingActionButton> with TickerProviderStateMixin {
  AnimationController _controller;
  @override
  void initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    super.initState();
  }

  void showConfirmMessage(int amount, H2OViewModel model) {
    showDialog(
      context: context,
      child: ConfirmAddAmountDialog(
        model: model,
        amount: amount,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 20, right: 20),
      child: new Column(mainAxisSize: MainAxisSize.min, children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                ActionButton(
                  controller: _controller,
                  text: "600${TranslationBase.of(context).ml}",
                  onTap: () {
                    showConfirmMessage(600, widget.model);
                  },
                ),
                ActionButton(
                  controller: _controller,
                  text: "330${TranslationBase.of(context).ml}",
                  onTap: () {
                    showConfirmMessage(330, widget.model);
                  },
                ),
                ActionButton(
                  controller: _controller,
                  text: "200${TranslationBase.of(context).ml}",
                  onTap: () {
                    showConfirmMessage(200, widget.model);
                  },
                ),
              ],
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            FloatingActionButton(
              heroTag: null,
              child: new AnimatedBuilder(
                animation: _controller,
                builder: (BuildContext context, Widget child) {
                  return new Transform(
                    transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
                    alignment: FractionalOffset.center,
                    child: new Icon(_controller.isDismissed ? Icons.add : Icons.close),
                  );
                },
              ),
              onPressed: () {
                if (_controller.isDismissed) {
                  _controller.forward();
                } else {
                  _controller.reverse();
                }
              },
            ),
            new Container(
              margin: EdgeInsets.only(left: 8, bottom: 4),
              alignment: FractionalOffset.topCenter,
              child: new ScaleTransition(
                scale: new CurvedAnimation(
                  parent: _controller,
                  curve: new Interval(0.0, 1.0 - 0 / 6 / 2.0, curve: Curves.easeOut),
                ),
                child: new FloatingActionButton(
                  backgroundColor: Colors.white,
                  heroTag: null,
                  // mini: true,
                  child: Text(
                    TranslationBase.of(context).custom,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 12, color: Colors.grey),
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      FadePage(
                        page: AddCustomAmount(
                          model: widget.model,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            new Container(
              margin: EdgeInsets.only(left: 8, bottom: 4),
              alignment: FractionalOffset.topCenter,
              child: new ScaleTransition(
                scale: new CurvedAnimation(
                  parent: _controller,
                  curve: new Interval(0.0, 1.0 - 0 / 6 / 2.0, curve: Curves.easeOut),
                ),
                child: new FloatingActionButton(
                  backgroundColor: Colors.white,
                  heroTag: null,
                  //mini: true,
                  child: Text(
                    TranslationBase.of(context).undo,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 12.0, color: Colors.grey),
                  ),
                  onPressed: undoVolume,
                ),
              ),
            ),
          ],
        ),
      ]),
    );
  }

  void undoVolume() async {
    GifLoaderDialogUtils.showMyDialog(context);
    await widget.model.undoUserActivity();
    GifLoaderDialogUtils.hideDialog(context);
  }
}

class ActionButton extends StatelessWidget {
  const ActionButton({Key key, @required AnimationController controller, @required this.text, this.onTap})
      : _controller = controller,
        super(key: key);

  final AnimationController _controller;
  final String text;
  final Function onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 4, bottom: 8),
      alignment: FractionalOffset.topCenter,
      child: new ScaleTransition(
        scale: new CurvedAnimation(
          parent: _controller,
          curve: new Interval(0.0, 1.0 - 0 / 6 / 2.0, curve: Curves.easeOut),
        ),
        child: new FloatingActionButton(
            heroTag: null,
            backgroundColor: Colors.white,
            //mini: true,
            child: Text(
              text,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 12.0, color: Colors.grey),
            ),
            onPressed: onTap),
      ),
    );
  }
}
