import 'package:driverapp/app-icons/driver_app_icons.dart';
import 'package:driverapp/core/model/authentication/login_request.dart';
import 'package:driverapp/core/viewModels/authentication_view_model.dart';
import 'package:driverapp/core/viewModels/project_view_model.dart';
import 'package:driverapp/uitl/translations_delegate_base.dart';
import 'package:driverapp/uitl/utils.dart';
import 'package:driverapp/widgets/buttons/secondary_button.dart';
import 'package:driverapp/widgets/input/text_field.dart';
import 'package:driverapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

import 'forget_password_page.dart';

class LoginPage extends StatelessWidget {
  LoginRequest loginRequest = LoginRequest();
  final loginFormKey = GlobalKey<FormState>();
  ProjectViewModel projectViewModel;
  AuthenticationViewModel authenticationViewModel;

  login() async {
    if (loginFormKey.currentState.validate()) {
      loginFormKey.currentState.save();
      await authenticationViewModel.login(loginRequest);
      if (authenticationViewModel.isError) {
        Utils.showErrorToast(authenticationViewModel.error);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    projectViewModel = Provider.of(context);
    authenticationViewModel = Provider.of(context);

    return AnimatedSwitcher(
      duration: Duration(microseconds: 350),
      child: AppScaffold(
        isShowAppBar: false,
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                FractionallySizedBox(
                  widthFactor: 0.80,
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 40,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            child: Icon(
                              DriverApp.logo,
                              size: 70,
                              color: Theme.of(context).primaryColor,
                            ),
                            margin: EdgeInsets.only(
                                top: 20,
                                right: projectViewModel.isArabic
                                    ? 0
                                    : MediaQuery
                                    .of(context)
                                    .size
                                    .width *
                                    0.15,
                                left: !projectViewModel.isArabic
                                    ? 0
                                    : MediaQuery
                                    .of(context)
                                    .size
                                    .width *
                                    0.15),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Column(
                        children: <Widget>[
                          Text(
                            "Driver",
                            style: TextStyle(
                                fontSize: 50, fontWeight: FontWeight.bold),
                          ),
                          Text(
                            "Delivery",
                            style: TextStyle(fontSize: 36, letterSpacing: 1),
                          ),
                          Text(
                            "APP",
                            style: TextStyle(
                                fontSize: 33,
                                letterSpacing: 33,
                                fontWeight: FontWeight.w400),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 30,
                      ),

//                        Row(
//                          mainAxisAlignment: MainAxisAlignment.center,
//                          children: <Widget>[
//                            CircleContainer(
//                              onTap: () =>
//                                  projectViewModel.changeLanguage('en'),
//                              child: Text(
//                                TranslationBase.of(context).lanEnglish,
//                                style: TextStyle(
//                                    fontSize: 12,
//                                    color: projectViewModel.isArabic
//                                        ? Colors.black
//                                        : Colors.white),
//                              ),
//                              color: projectViewModel.isArabic
//                                  ? Colors.transparent
//                                  : Theme.of(context).primaryColor,
//                              borderWidth: projectViewModel.isArabic ? 3 : 0,
//                              borderColor: projectViewModel.isArabic
//                                  ? Theme.of(context).primaryColor
//                                  : Colors.transparent,
//                            ),
//                            SizedBox(
//                              width: 20,
//                            ),
//                            CircleContainer(
//                                onTap: () =>
//                                    projectViewModel.changeLanguage('ar'),
//                                child: Text(
//                                  TranslationBase.of(context).lanArabic,
//                                  style: TextStyle(
//                                      fontSize: 12,
//                                      color: !projectViewModel.isArabic
//                                          ? Colors.black
//                                          : Colors.white),
//                                ),
//                                color: !projectViewModel.isArabic
//                                    ? Colors.transparent
//                                    : Theme.of(context).primaryColor,
//                                borderWidth: !projectViewModel.isArabic ? 3 : 0,
//                                borderColor: !projectViewModel.isArabic
//                                    ? Theme.of(context).primaryColor
//                                    : Colors.transparent),
//                          ],
//                        ),
                      SizedBox(
                        height: 10,
                      ),
                      Form(
                        key: loginFormKey,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Padding(
                              padding:
                              const EdgeInsets.symmetric(horizontal: 20),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: <Widget>[
                                  Expanded(
                                    child: Text(
                                      TranslationBase.of(context)
                                          .enterCredentialsMsg,
                                      style: TextStyle(
                                          fontSize: 13, color: Colors.grey),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 10,
                                  )
                                ],
                              ),
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Container(
                              child: TextFields(
                                hintText: TranslationBase.of(context).enterId,
                                keyboardType: TextInputType.number,
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return TranslationBase.of(context)
                                        .pleaseEnterYourID;
                                  }
                                  return null;
                                },
                                onSaved: (value) {
                                  loginRequest.userID = int.parse(value.trim());
                                },
                              ),
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            Container(
                              child: TextFields(
                                borderRadiusValue: 6,
                                hintText:
                                TranslationBase.of(context).enterPassword,
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return TranslationBase.of(context)
                                        .pleaseEnterPassword;
                                  }
                                  return null;
                                },
                                onSaved: (value) {
                                  loginRequest.password = value;
                                },
                                type: 'password',
                              ),
                            ),
                            SizedBox(
                              height: 25,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                InkWell(
                                  onTap: () {
                                    Navigator.pushReplacement(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              ForgetPasswordPage()
                                      ),
                                    );
                                  },
                                  child: Text(
                                    TranslationBase
                                        .of(context)
                                        .forgotPassword,
                                    style: TextStyle(
                                        fontSize: 14,
                                        color: Theme
                                            .of(context)
                                            .primaryColor),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                SizedBox(
                  height: 10,
                ),

                Container(
                    margin: EdgeInsets.all(10),
                    height: MediaQuery.of(context).size.height * 0.22,
                    child: Column(
                      children: <Widget>[
                        SecondaryButton(
                          label: TranslationBase.of(context).login,
                          onTap: () {
                            login();
                          },
                          disabled: authenticationViewModel.isLoading,
                          loading: authenticationViewModel.isLoading,
                        ),
                        SizedBox(
                          height: 30,
                        ),
                      ],
                    ))
              ],
            ),
          ),
        ),
      ),
    );
  }

}
