import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/models/enums/translation_keys.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_lazy_loading.dart';

import '../../controllers/providers/api/user_provider.dart';
import '../../controllers/providers/settings/setting_provider.dart';
import '../../controllers/validator/validator.dart';
import '../../models/user.dart';
import '../common_widgets/app_filled_button.dart';
import '../common_widgets/app_text_form_field.dart';

class LoginPage extends StatefulWidget {
  static const String routeName = "/login_page";
  const LoginPage({Key key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final User _user = User();
  UserProvider _userProvider;
  SettingProvider _settingProvider;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    _userProvider = Provider.of<UserProvider>(context);
    _settingProvider = Provider.of<SettingProvider>(context);

    return Form(
      key: _formKey,
      child: Scaffold(
        body: Padding(
          padding: EdgeInsets.only(
            right: 16.toScreenWidth,
            left: 16.toScreenWidth,
            bottom: 150.toScreenHeight,
            top: MediaQuery.of(context).viewPadding.top,
          ),
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Hero(
                    tag: "logo",
                    child: SvgPicture.asset("assets/images/logo.svg", height: 64.toScreenHeight),
                  ),
                  64.height,
                  Text(
                    context.translate(TranslationKeys.login),
                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: AppColor.neutral50, fontWeight: FontWeight.w600),
                  ),
                  Text(
                    context.translate(TranslationKeys.enterCredsToLogin),
                    style: Theme.of(context).textTheme.titleMedium?.copyWith(color: AppColor.neutral20, fontWeight: FontWeight.w500),
                  ),
                  32.height,
                  AppTextFormField(
                    initialValue: _user?.userName,
                    validator: (value) => Validator.hasValue(value) ? null : context.translate(TranslationKeys.requiredField),
                    labelText: TranslationKeys.username,
                    textInputType: TextInputType.name,
                    onSaved: (value) {
                      _user.userName = value;
                    },
                  ),
                  16.height,
                  AppTextFormField(
                    initialValue: _user?.password,
                    labelText: TranslationKeys.password,
                    obscureText: true,
                    validator: (value) => Validator.isValidPassword(value)
                        ? null
                        : value.isEmpty
                            ? context.translate(TranslationKeys.requiredField)
                            : context.translate(TranslationKeys.passwordLengthMessage),
                    onSaved: (value) {
                      _user.password = value;
                    },
                  ),
                  16.height,
                  Align(
                    alignment: AlignmentDirectional.centerEnd,
                    child: InkWell(
                      onTap: () {
                        /// TODO [zaid] : push to another screen
                      },
                      child: Text(
                        "${context.translate(TranslationKeys.forgotPassword)}?",
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: AppColor.primary50, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: SizedBox(
          width: double.infinity,
          child: AppFilledButton(label: TranslationKeys.login, onPressed: _login),
        ),
      ),
    );
  }

  Future<void> _login() async {
    if (!_formKey.currentState.validate()) return;
    _formKey.currentState.save();
    showDialog(context: context, barrierDismissible: false, builder: (context) => const ALazyLoading());
    int status = await _userProvider.login(user: _user);
    Navigator.pop(context);
    if (status >= 200 && status < 300 && _userProvider.user.isAuthenticated ?? false) {
      _settingProvider.setUser(_userProvider.user);

      /// TODO [zaid] : push to home page
    } else {
      Fluttertoast.showToast(msg: _userProvider.user.message);
    }
  }
}