import 'package:aitrainer_app/bloc/customer_change/customer_change_bloc.dart';
import 'package:aitrainer_app/localization/app_localization.dart';
import 'package:aitrainer_app/repository/customer_repository.dart';
import 'package:aitrainer_app/model/fitness_state.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// ignore: must_be_immutable
class CustomerFitnessPage extends StatefulWidget {
  _CustomerFitnessPageState _state;

  _CustomerFitnessPageState createState() {
    _state = _CustomerFitnessPageState();
    return _state;
  }
}

/* class FitnessItem {
  static String beginner = "beginner";
  static String intermediate = "intermediate";
  static String advanced = "advanced";
  static String professional = "professional";
}
 */
//TODO
// dropbox for professional sport

class _CustomerFitnessPageState extends State<CustomerFitnessPage> {
  String selected;

  @override
  Widget build(BuildContext context) {
    final double cWidth = MediaQuery.of(context).size.width * 0.75;
    final CustomerRepository customerRepository = ModalRoute.of(context).settings.arguments;
    selected = customerRepository.customer.fitnessLevel;
    return Scaffold(
        appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Image.asset(
                'asset/image/WT_long_logo.png',
                fit: BoxFit.cover,
                height: 65.0,
              ),
            ],
          ),
          backgroundColor: Colors.transparent,
        ),
        body: BlocProvider(
            create: (context) => CustomerChangeBloc(customerRepository: customerRepository),
            child: Builder(builder: (context) {
              // ignore: close_sinks
              CustomerChangeBloc changeBloc = BlocProvider.of<CustomerChangeBloc>(context);

              return SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: Container(
                  padding: EdgeInsets.only(bottom: 200),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('asset/image/WT_light_background.png'),
                      fit: BoxFit.cover,
                      alignment: Alignment.center,
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Divider(),
                      Wrap(
                          //runAlignment: WrapAlignment.center,
                          alignment: WrapAlignment.center,
                          children: [
                            Text(
                              AppLocalizations.of(context).translate("Your Fitness State"),
                              textAlign: TextAlign.center,
                              style: TextStyle(color: Colors.orange, fontSize: 42, fontFamily: 'Arial', fontWeight: FontWeight.w900),
                            )
                          ]),
                      Divider(),
                      FlatButton(
                          child: Container(
                              width: cWidth,
                              child: Column(
                                children: [
                                  Text(AppLocalizations.of(context).translate("Beginner"),
                                      textWidthBasis: TextWidthBasis.longestLine,
                                      style: TextStyle(color: Colors.blue, fontSize: 32, fontFamily: 'Arial', fontWeight: FontWeight.w900)),
                                  Text(
                                    AppLocalizations.of(context).translate("I am beginner"),
                                    style: TextStyle(color: Colors.black, fontSize: 20, fontFamily: 'Arial', fontWeight: FontWeight.w100),
                                  ),
                                ],
                              )),
                          padding: EdgeInsets.all(10.0),
                          shape: getShape(customerRepository, FitnessState.beginner),
                          onPressed: () => {
                                setState(() {
                                  selected = FitnessState.beginner;
                                  changeBloc.add(CustomerFitnessChange(fitness: selected));
                                }),
                              }),
                      Divider(),
                      FlatButton(
                          child: Container(
                            width: cWidth,
                            child: Column(
                              children: [
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("Intermediate"),
                                    style: TextStyle(color: Colors.blue, fontSize: 32, fontFamily: 'Arial', fontWeight: FontWeight.w900),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("I am intermediate"),
                                    style: TextStyle(color: Colors.black, fontSize: 20, fontFamily: 'Arial', fontWeight: FontWeight.w100),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                              ],
                            ),
                          ),
                          padding: EdgeInsets.all(10.0),
                          shape: getShape(customerRepository, FitnessState.intermediate),
                          onPressed: () => {
                                setState(() {
                                  selected = FitnessState.intermediate;
                                  changeBloc.add(CustomerFitnessChange(fitness: selected));
                                  print(selected);
                                }),
                              }),
                      Divider(),
                      FlatButton(
                          child: Container(
                            width: cWidth,
                            child: Column(
                              children: [
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("Advanced"),
                                    style: TextStyle(color: Colors.blue, fontSize: 32, fontFamily: 'Arial', fontWeight: FontWeight.w900),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("I am advanced"),
                                    style: TextStyle(color: Colors.black, fontSize: 20, fontFamily: 'Arial', fontWeight: FontWeight.w100),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                              ],
                            ),
                          ),
                          padding: EdgeInsets.all(10.0),
                          shape: getShape(customerRepository, FitnessState.advanced),
                          onPressed: () => {
                                setState(() {
                                  selected = FitnessState.advanced;
                                  changeBloc.add(CustomerFitnessChange(fitness: selected));
                                  print(selected);
                                }),
                              }),
                      Divider(),
                      FlatButton(
                          child: Container(
                            width: cWidth,
                            child: Column(
                              children: [
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("Professional"),
                                    style: TextStyle(color: Colors.blue, fontSize: 32, fontFamily: 'Arial', fontWeight: FontWeight.w900),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                                InkWell(
                                  child: Text(
                                    AppLocalizations.of(context).translate("I am professional"),
                                    style: TextStyle(color: Colors.black, fontSize: 20, fontFamily: 'Arial', fontWeight: FontWeight.w100),
                                  ),
                                  highlightColor: Colors.white,
                                ),
                              ],
                            ),
                          ),
                          padding: EdgeInsets.all(10.0),
                          shape: getShape(customerRepository, FitnessState.professional),
                          onPressed: () => {
                                setState(() {
                                  selected = FitnessState.professional;
                                  changeBloc.add(CustomerFitnessChange(fitness: selected));
                                  print(selected);
                                }),
                              }),
                      Divider(),
                      RaisedButton(
                        color: Colors.orange,
                        textColor: Colors.white,
                        child: InkWell(child: Text(AppLocalizations.of(context).translate("Next"))),
                        onPressed: () => {
                          changeBloc.add(CustomerSave()),
                          Navigator.of(context).pop(),
                          Navigator.of(context).pushNamed("customerBodyTypePage", arguments: customerRepository)
                        },
                      )
                    ],
                  ),
                ),
              );
            })));
  }

  dynamic getShape(CustomerRepository customerRepository, String fitnessLevel) {
    String selected = customerRepository.fitnessLevel;
    dynamic returnCode = (selected == fitnessLevel)
        ? RoundedRectangleBorder(
            side: BorderSide(width: 4, color: Colors.orange),
          )
        : RoundedRectangleBorder(
            side: BorderSide(width: 1, color: Colors.blue),
          );
    //return
    return returnCode;
  }
}