import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:<%= baseName %>/account/register/bloc/register_bloc.dart';
<%_ if (enableTranslation) { _%>
    import 'package:<%= baseName %>/generated/l10n.dart';
<%_ } _%>
import 'package:<%= baseName %>/keys.dart';
import 'package:<%= baseName %>/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:formz/formz.dart';
import 'package:<%= baseName %>/shared/repository/http_utils.dart';

import 'bloc/register_models.dart';


class RegisterScreen extends StatelessWidget {
  RegisterScreen() : super(key: <%= camelizedUpperFirstBaseName %>Keys.registerScreen);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterTitle <%_ } else { _%> 'Register' <%_ } _%>),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(15.0),
          child: Column(children: <Widget>[
            header(context),
            successZone(),
            registerForm()
          ]),
        ));
  }

  Widget header(BuildContext context) {
    return Column(
      children: <Widget>[
        Image(
          image:
              AssetImage('assets/images/<%= hipster %>_head-512.png'),
          fit: BoxFit.fill,
          width: MediaQuery.of(context).size.width * 0.35,
        ),
        Padding(padding: EdgeInsets.symmetric(vertical: 20))
      ],
    );
  }

  Widget registerForm() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.status != current.status,
        builder: (context, state) {
          return Visibility(
            visible: !state.status.isSubmissionSuccess,
            child: Form(
              child: Wrap(runSpacing: 15, children: <Widget>[
                loginField(),
                emailField(),
                passwordField(),
                confirmPasswordField(),
                termsAndConditionsField(),
                validationZone(),
                submit()
              ]),
            ),
          );
        });
  }

  Widget loginField() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.login != current.login,
        builder: (context, state) {
          return TextFormField(
              initialValue: state.login.value,
              onChanged: (value) { context.bloc<RegisterBloc>().add(LoginChanged(login: value)); },
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: <%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormLogin <%_ } else { _%> 'Login' <%_ } _%>,
                  errorText: state.login.invalid ? LoginValidationError.invalid.invalidMessage : null));
        });
  }

  Widget emailField() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.email != current.email,
        builder: (context, state) {
          return TextFormField(
            onChanged: (value) { context.bloc<RegisterBloc>().add(EmailChanged(email: value)); },
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
                labelText: <%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormEmail <%_ } else { _%> 'Email' <%_ } _%>,
                hintText: <%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormEmailHint <%_ } else { _%> 'you@example.com' <%_ } _%>,
                errorText: state.email.invalid ? EmailValidationError.invalid.invalidMessage : null),
          );
        });
  }

  Widget passwordField() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.password != current.password,
        builder: (context, state) {
          return TextFormField(
              onChanged: (value) { context.bloc<RegisterBloc>().add(PasswordChanged(password: value)); },
              obscureText: true,
              decoration: InputDecoration(
                  labelText:<%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormPassword <%_ } else { _%> 'Password' <%_ } _%>,
                  errorText: state.password.invalid ? PasswordValidationError.invalid.invalidMessage : null));
        });
  }

  Widget confirmPasswordField() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.confirmPassword != current.confirmPassword,
        builder: (context, state) {
          return TextFormField(
              onChanged: (value) { context.bloc<RegisterBloc>().add(ConfirmPasswordChanged(confirmPassword: value, password: state.password.value)); },
              obscureText: true,
              decoration: InputDecoration(
                  labelText: <%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormConfirmPassword <%_ } else { _%> 'Confirm password' <%_ } _%>,
                  errorText: state.confirmPassword.invalid ? ConfirmPasswordValidationError.invalid.invalidMessage : null));
        });
  }

  Widget termsAndConditionsField() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.termsAndConditions != current.termsAndConditions,
        builder: (context, state) {
          return Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    height: 24,
                    width: 24,
                    child: Checkbox(
                        onChanged: (value) { context.bloc<RegisterBloc>().add(TermsAndConditionsChanged(termsAndConditions: value)); },
                        value: state.termsAndConditions.value),
                  ),
                  Padding(
                    padding: EdgeInsets.only(right: 5),
                  ),
                  Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormTermsConditions <%_ } else { _%> 'I accept the terms of use' <%_ } _%>, style: Theme.of(context).textTheme.bodyText1,),
                ],
              ),
              Visibility(
                visible: state.termsAndConditions.status != FormzInputStatus.pure && state.termsAndConditions.invalid,
                child: Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormTermsConditionsNotChecked <%_ } else { _%> 'Please accept the terms and conditions' <%_ } _%>,
                    style: TextStyle(color: Theme.of(context).errorColor),
                  ),
                ),
              )
            ],
          );
        });
  }

  Widget validationZone() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.status != current.status
            || previous.generalErrorKey != current.generalErrorKey,
        builder: (context, state) {
          return Visibility(
              visible: state.status.isSubmissionFailure || state.status.isInvalid && state.generalErrorKey != HttpUtils.generalNoErrorKey,
              child: Center(
                child: Text(
                  generateError(state, context),
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Theme.of(context).errorColor),
                ),
              ));
        });
  }

  String generateError(RegisterState state, BuildContext context) {
    String errorTranslated = '';
    if(state.generalErrorKey.toString().compareTo(RegisterBloc.passwordNotIdenticalKey) == 0){
      errorTranslated = <%_ if (enableTranslation) { _%> S.of(context).pageRegisterErrorPasswordNotIdentical <%_ } else { _%> 'The passwords are not identical' <%_ } _%>;
    } else if(state.generalErrorKey.toString().compareTo(RegisterBloc.emailExistKey) == 0) {
      errorTranslated = <%_ if (enableTranslation) { _%> S.of(context).pageRegisterErrorMailExist <%_ } else { _%> 'Email already exist' <%_ } _%>;
    } else if (state.generalErrorKey.toString().compareTo(RegisterBloc.loginExistKey) == 0){
      errorTranslated = <%_ if (enableTranslation) { _%> S.of(context).pageRegisterErrorLoginExist <%_ } else { _%> 'Login already taken' <%_ } _%>;
    } else if (state.generalErrorKey.toString().compareTo(HttpUtils.errorServerKey) == 0) {
      errorTranslated = <%_ if (enableTranslation) { _%> S.of(context).genericErrorServer <%_ } else { _%> 'Something wrong when calling the server, please try again' <%_ } _%>;
    }

    return errorTranslated;
  }

  Widget submit() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.status != current.status,
        builder: (context, state) {
          return RaisedButton(
            child: Container(
                width: MediaQuery.of(context).size.width,
                height: 50,
                child:  Center(
                  child: Visibility(
                    replacement: CircularProgressIndicator(value: null),
                    visible: !state.status.isSubmissionInProgress,
                    child: Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormSubmit.toUpperCase() <%_ } else { _%> 'Sign up' <%_ } _%>,
                    ),
                  ),
                )),
            onPressed: state.status.isValidated ? () => context.bloc<RegisterBloc>().add(FormSubmitted()) : null,
          );
        });
  }

  Widget successZone() {
    return BlocBuilder<RegisterBloc, RegisterState>(
        buildWhen: (previous, current) => previous.status != current.status,
        builder: (context, state) {
          return Visibility(
            visible: state.status.isSubmissionSuccess,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.check_circle,
                    color: Theme.of(context).primaryColor,
                    size: 125.0,
                    semanticLabel: <%_ if (enableTranslation) { _%> S.of(context).pageRegisterSuccessAltImg <%_ } else { _%> 'Register success' <%_ } _%>,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 10),
                  ),
                  Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterSuccess.toUpperCase() <%_ } else { _%> 'Congratulation'.toUpperCase() <%_ } _%>,
                      style: Theme.of(context).textTheme.headline1),
                  Padding(
                    padding: EdgeInsets.only(top: 10),
                  ),
                  Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterSuccessSub <%_ } else { _%> 'You have successfuly registered' <%_ } _%>),
                  Padding(
                    padding: EdgeInsets.only(top: 30),
                  ),
                  RaisedButton(
                    child: Container(
                        child: Center(
                            child: Text(<%_ if (enableTranslation) { _%> S.of(context).pageRegisterFormLogin <%_ } else { _%> 'Login' <%_ } _%>))),
                    onPressed: () =>
                        Navigator.pushNamed(context, <%= camelizedUpperFirstBaseName %>Routes.login),
                  )
                ],
              ),
            ),
          );
        });
  }
}