import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:keyboard_actions/keyboard_actions.dart';

/// Dialog for input any data and call of an [Event] of a [Bloc]
class InputDialog<Event> extends StatefulWidget {
  final ValueChanged<dynamic> onChanged;

  final double initialValue;

  /// Dialog title
  final String title;

  final String subtitle;

  const InputDialog({required this.onChanged, required this.initialValue, required this.title, required this.subtitle});

  @override
  _InputDialogState<Event> createState() => _InputDialogState<Event>();
}

class _InputDialogState<Event> extends State<InputDialog<Event>> with Trans {
  final FocusNode _nodeText1 = FocusNode();
  double inputValue = 0;

  KeyboardActionsConfig _buildConfig(BuildContext context) {
    setContext(context);
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      keyboardSeparatorColor: Colors.black26,
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
          toolbarButtons: [
            //button 2
            (node) {
              return GestureDetector(
                onTap: () => node.unfocus(),
                child: Container(
                  color: Colors.orange,
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    t("Done"),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              );
            }
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        padding: EdgeInsets.only(
            top: _nodeText1.hasFocus
                ? 0 // adjust values according to your need
                : MediaQuery.of(context).size.height / 2 - 250), // adjust values according to your need
        child: Dialog(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
          elevation: 0,
          backgroundColor: Colors.transparent,
          child: _buildChild(context),
        ));
  }

  _buildChild(BuildContext context) => Container(
        height: 350,
        decoration: BoxDecoration(color: Colors.grey[700], shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(12))),
        child: KeyboardActions(
          config: _buildConfig(context),
          child: Column(
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(0.0),
                child: Column(children: [
                  Text(
                    widget.title,
                    style: GoogleFonts.archivoBlack(
                      shadows: <Shadow>[
                        Shadow(
                          offset: Offset(3.0, 3.0),
                          blurRadius: 3.0,
                          color: Colors.black54,
                        ),
                      ],
                      fontSize: 25,
                      color: Colors.orange[500],
                    ),
                  ),
                  Text(
                    widget.subtitle,
                    style: GoogleFonts.archivoBlack(
                      shadows: <Shadow>[
                        Shadow(
                          offset: Offset(3.0, 3.0),
                          blurRadius: 3.0,
                          color: Colors.black54,
                        ),
                      ],
                      fontSize: 30,
                      color: Colors.orange[500],
                    ),
                  ),
                ]),
                width: double.infinity,
                decoration: BoxDecoration(
                    color: Colors.grey[900],
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12))),
              ),
              SizedBox(
                height: 8,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20, right: 16, left: 16),
                child: Text(
                  t("Please type the following data:"),
                  style: GoogleFonts.inter(fontSize: 16, color: Colors.yellow[200], shadows: <Shadow>[
                    Shadow(
                      offset: Offset(2.0, 2.0),
                      blurRadius: 3.0,
                      color: Colors.black54,
                    )
                  ]),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 24,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 90, right: 90),
                child: TextFormField(
                  focusNode: _nodeText1,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, top: 5, bottom: 5),
                    labelText: widget.subtitle,
                    labelStyle: GoogleFonts.inter(fontSize: 16, color: Colors.yellow[50]),
                    fillColor: Colors.black38,
                    filled: true,
                    border: OutlineInputBorder(
                      gapPadding: 2.0,
                      borderRadius: BorderRadius.circular(12.0),
                      borderSide: BorderSide(color: Colors.white12, width: 0.4),
                    ),
                  ),
                  initialValue: widget.initialValue.toStringAsFixed(1),
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  textInputAction: TextInputAction.done,
                  style: GoogleFonts.archivoBlack(fontSize: 20, color: Colors.yellow[300]),
                  onChanged: (value) => {value = value.replaceFirst(",", "."), this.inputValue = double.parse(value)},
                ),
              ),
              SizedBox(
                height: 24,
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.black26,
                      onSurface: Colors.white,
                    ),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(t('Cancel')),
                  ),
                  SizedBox(
                    width: 8,
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.orange[600],
                      onSurface: Colors.white,
                    ),
                    onPressed: () {
                      widget.onChanged(this.inputValue);
                      return Navigator.of(context).pop(true);
                    },
                    child: Text(t('Save')),
                  )
                ],
              )
            ],
          ),
        ),
      );
}