import 'package:aitrainer_app/bloc/custom_exercise_form_bloc.dart';
import 'package:aitrainer_app/localization/app_localization.dart';
import 'package:aitrainer_app/model/exercise_type.dart';
import 'package:aitrainer_app/repository/exercise_repository.dart';
import 'package:aitrainer_app/widgets/splash.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';

class CustomExercisePage extends StatefulWidget {
  _CustomExerciseNewPageState createState() => _CustomExerciseNewPageState();
}

class _CustomExerciseNewPageState extends State<CustomExercisePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    final ExerciseType exerciseType = ModalRoute.of(context).settings.arguments;

    return BlocProvider(
        create: (context) =>
            CustomExerciseFormBloc(exerciseRepository: ExerciseRepository()),
        child: Builder(builder: (context) {
          // ignore: close_sinks
          final exerciseBloc = BlocProvider.of<CustomExerciseFormBloc>(context);
          exerciseBloc.exerciseRepository.setExerciseType(exerciseType);

          return Scaffold(
              key: _scaffoldKey,
              resizeToAvoidBottomInset: true,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Image.asset(
                      'asset/image/WT_long_logo.png',
                      fit: BoxFit.cover,
                      height: 65.0,
                    ),
                  ],
                ),
                leading: IconButton(
                  icon: Icon(Icons.arrow_back, color: Colors.white),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ),
              body: FormBlocListener<CustomExerciseFormBloc, String, String>(
                  onSubmitting: (context, state) {
                    LoadingDialog.show(context);
                  },
                  onSuccess: (context, state) {
                    LoadingDialog.hide(context);
                  },
                  onFailure: (context, state) {
                    LoadingDialog.hide(context);
                    Scaffold.of(context).showSnackBar(SnackBar(
                        backgroundColor: Colors.orange,
                        content: Text(state.failureResponse,
                            style: TextStyle(color: Colors.white))));
                  },
                  child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: MediaQuery.of(context).size.height,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image:
                              AssetImage('asset/image/WT_light_background.png'),
                          fit: BoxFit.fill,
                          alignment: Alignment.center,
                        ),
                      ),
                      child: CustomScrollView(
                        scrollDirection: Axis.vertical,
                        slivers: [
                          SliverList(
                            delegate: SliverChildListDelegate(
                              [
                                Container(
                                  padding: EdgeInsets.only(top:20,left:25, right:25),
                                  alignment: Alignment.center,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text("Custom Exercise",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              fontSize: 14,
                                              color: Colors.deepOrange)),
                                      columnQuantityUnit(exerciseBloc),
                                      columnQuantity(exerciseBloc),
                                    ]
                                  )
                                ),
                            ]
                           ),

                          ),
                        gridCalculation(exerciseBloc)
                      ]
                    )
                  )
              )
          );
        }));
  }

  Column columnQuantityUnit(CustomExerciseFormBloc bloc) {
    Column column = Column();
    if (bloc.exerciseRepository.exerciseType != null &&
        bloc.exerciseRepository.exerciseType.unitQuantity == "1") {
      column = Column(children: [
        TextFieldBlocBuilder(
          textFieldBloc: bloc.unitQuantityField,
          textAlign: TextAlign.center,
          style: TextStyle(
              fontSize: 16,
              color: Colors.lightBlue,
              fontWeight: FontWeight.bold),
          inputFormatters: [
            FilteringTextInputFormatter(RegExp(r"[\d.]"), allow: true)
          ],
          onChanged: (input) => {
            print("UnitQuantity value $input"),
            bloc.exerciseRepository.setUnitQuantity(double.parse(input))
          },
          decoration: InputDecoration(
            fillColor: Colors.white,
            filled: false,
            hintStyle: TextStyle(
                fontSize: 12,
                color: Colors.black54,
                fontWeight: FontWeight.w100),
            hintText: AppLocalizations.of(context)
                .translate("The number of the exercise done with"),
            labelStyle: TextStyle(fontSize: 12, color: Colors.lightBlue),
            labelText: AppLocalizations.of(context).translate(
                bloc.exerciseRepository.exerciseType.unitQuantityUnit),
          ),
        ),
        new InkWell(
          child: new Text(
              AppLocalizations.of(context).translate(
                  bloc.exerciseRepository.exerciseType.unitQuantityUnit),
              style: TextStyle(fontSize: 12)),
        ),
      ]);
    }
    ;
    return column;
  }

  Column columnQuantity(CustomExerciseFormBloc bloc) {
    Column column = Column(children: [
      TextFieldBlocBuilder(
        textFieldBloc: bloc.quantityField,
        textAlign: TextAlign.center,
        style: TextStyle(
            fontSize: 20,
            color: Colors.deepOrange,
            fontWeight: FontWeight.bold),
        inputFormatters: [
          FilteringTextInputFormatter(RegExp(r"[\d.]"), allow: true)
        ],
        onChanged: (input) => {
          print("Quantity value $input"),
          bloc.exerciseRepository.setQuantity(double.parse(input)),
          bloc.exerciseRepository
              .setUnit(bloc.exerciseRepository.exerciseType.unit)
        },
        decoration: InputDecoration(
          fillColor: Colors.white,
          filled: false,
          hintStyle: TextStyle(
              fontSize: 12, color: Colors.black54, fontWeight: FontWeight.w100),
          hintText: AppLocalizations.of(context)
              .translate("The number of the exercise"),
          labelStyle: TextStyle(fontSize: 12, color: Colors.deepOrange),
          labelText: AppLocalizations.of(context)
              .translate(bloc.exerciseRepository.exerciseType.unit),
        ),
      ),
    ]);

    return column;
  }

  SliverGrid gridCalculation(CustomExerciseFormBloc bloc) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildListDelegate(
          [
              TextFieldBlocBuilder(
                readOnly: true,
                textFieldBloc: bloc.rmWendlerField,
                padding: EdgeInsets.only(left:30),
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by Wendler: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                textFieldBloc: bloc.rmMcGothlinField,
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by McGlothin: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                maxLines: 1,
                textFieldBloc: bloc.rmLombardiField,
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by Lambordini: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                maxLines: 1,
                textFieldBloc: bloc.rmWathenField,
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by Wahten: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                maxLines: 1,
                textFieldBloc: bloc.rmOconnerField,
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by O'Conner: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                maxLines: 1,
                textFieldBloc: bloc.rmMayhewField,
                style: TextStyle(color: Colors.deepOrange, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM by Mayhew: ",
                )),
              TextFieldBlocBuilder(
                readOnly: true,
                padding: EdgeInsets.only(left:30),
                maxLines: 1,
                textFieldBloc: bloc.rmAverageField,
                style: TextStyle(color: Colors.blueAccent, fontSize: 12),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  filled: false,
                  labelText: "1RM Average: ",
                )),
            TextFieldBlocBuilder(
              readOnly: true,
              padding: EdgeInsets.only(left:30),
              maxLines: 1,
              textFieldBloc: bloc.rm90Field,
              style: TextStyle(color: Colors.deepOrange, fontSize: 12),
              decoration: InputDecoration(
                border: InputBorder.none,
                fillColor: Colors.white,
                filled: false,
                labelText: "1RM 90%: ",
              )),
            TextFieldBlocBuilder(
              readOnly: true,
              padding: EdgeInsets.only(left:30),
              maxLines: 1,
              textFieldBloc: bloc.rm80Field,
              style: TextStyle(color: Colors.deepOrange, fontSize: 12),
              decoration: InputDecoration(
                border: InputBorder.none,
                fillColor: Colors.white,
                filled: false,
                labelText: "1RM 80%: ",
              )),
            TextFieldBlocBuilder(
              readOnly: true,
              padding: EdgeInsets.only(left:30),
              maxLines: 1,
              textFieldBloc: bloc.rm70Field,
              style: TextStyle(color: Colors.deepOrange, fontSize: 12),
              decoration: InputDecoration(
                border: InputBorder.none,
                fillColor: Colors.white,
                filled: false,
                labelText: "1RM 70%: ",
              )),
            TextFieldBlocBuilder(
              readOnly: true,
              padding: EdgeInsets.only(left:30),
              maxLines: 1,
              textFieldBloc: bloc.rm60Field,
              style: TextStyle(color: Colors.deepOrange, fontSize: 12),
              decoration: InputDecoration(
                border: InputBorder.none,
                fillColor: Colors.white,
                filled: false,
                labelText: "1RM 60%: ",
              )),
            TextFieldBlocBuilder(
              readOnly: true,
              padding: EdgeInsets.only(left:30),
              maxLines: 1,
              textFieldBloc: bloc.rm50Field,
              style: TextStyle(color: Colors.deepOrange, fontSize: 12),
              decoration: InputDecoration(
                border: InputBorder.none,
                fillColor: Colors.white,
                filled: false,
                labelText: "1RM 50%: ",
              ))
            ])
          );
  }
}