import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:unit2/theme-data.dart/btn-style.dart';
import 'package:unit2/widgets/wave.dart';
import '../../../bloc/user/user_bloc.dart';
import '../../../theme-data.dart/colors.dart';
import '../../../theme-data.dart/form-style.dart';
import '../../../utils/global.dart';
import '../../../utils/text_container.dart';
import '../../../utils/validators.dart';

class QRLogin extends StatefulWidget {
  const QRLogin({super.key});

  @override
  State<QRLogin> createState() => _QRLoginState();
}

class _QRLoginState extends State<QRLogin> {
  bool showSuffixIcon = false;
  bool _showPassword = true;
  final _formKey = GlobalKey<FormBuilderState>();
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: ()async{
        context.read<UserBloc>().add(LoadVersion());
        return true;
      },
      child: SafeArea(
        child: Scaffold(
          resizeToAvoidBottomInset: true,
          appBar: AppBar(
            backgroundColor: primary,
            elevation: 0,
            title: const Text("Login via QR"),
            centerTitle: true,
          ),
          body: ProgressHUD(
            child: BlocConsumer<UserBloc, UserState>(
              listener: (context,state){
                   if (state is UserLoggedIn) {
              final progress = ProgressHUD.of(context);
              progress!.dismiss();
            Navigator.pushReplacementNamed(context, '/module-screen');
            }
              },
              builder: (context, state) {
                if (state is UuidLoaded) {
                  return SingleChildScrollView(
                    child: Stack(
                      children: [
                        Positioned(
                            bottom: 0,
                            child: WaveReverse(height: blockSizeVertical * 8)),
                        Container(
                          height: screenHeight * .90,
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          child: FormBuilder(
                            key: _formKey,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                SvgPicture.asset(
                                  'assets/svgs/logo.svg',
                                  height: blockSizeVertical * 12,
                                  allowDrawingOutsideViewBox: true,
                                  color: primary,
                                ),
                                const SizedBox(
                                  height: 12,
                                ),
                                Text(unitApp,
                                    style: TextStyle(
                                        fontSize: blockSizeVertical * 5,
                                        fontWeight: FontWeight.w800,
                                        letterSpacing: .2,
                                        height: 1,
                                        color: Colors.black87)),
                                const SizedBox(
                                  height: 15,
                                ),
                                Text(
                                  "Enter your password",
                                  style: TextStyle(
                                      fontSize: blockSizeVertical * 1.5,
                                      height: 1.5,
                                      fontWeight: FontWeight.w600),
                                ),
                                const SizedBox(
                                  height: 15,
                                ),
                                // Password
                                FormBuilderTextField(
                                  name: 'password',
                                  validator: registerPasswordValidator,
                                  // initialValue: state.password,
                                  onChanged: (value) {
                                    value!.isEmpty
                                        ? setState(() {
                                            showSuffixIcon = false;
                                          })
                                        : setState(() {
                                            showSuffixIcon = true;
                                          });
                                  },
                                  autofocus: false,
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black87),
                                  decoration: loginTextFieldStyle().copyWith(
                                      suffixIcon: Visibility(
                                        visible: showSuffixIcon,
                                        child: _showPassword
                                            ? IconButton(
                                                icon: Icon(FontAwesome5.eye_slash,
                                                    size: 24,
                                                    color: Theme.of(context)
                                                        .textTheme
                                                        .displayLarge
                                                        ?.color),
                                                onPressed: () {
                                                  setState(() {
                                                    _showPassword = false;
                                                  });
                                                },
                                              )
                                            : IconButton(
                                                onPressed: () {
                                                  setState(() {
                                                    _showPassword = true;
                                                  });
                                                },
                                                icon: Icon(FontAwesome5.eye,
                                                    size: 24,
                                                    color: Theme.of(context)
                                                        .textTheme
                                                        .displayLarge
                                                        ?.color)),
                                      ),
                                      prefixIcon: const Icon(Icons.lock),
                                      labelText: "Password",
                                      hintText: enterPassword),
                                  obscureText: _showPassword ? true : false,
                                ),
                                const SizedBox(
                                  height: 15,
                                ),
                              
                                const SizedBox(
                                  height: 15,
                                ),
                                SizedBox(
                                  width: double.infinity,
                                  height: blockSizeVertical * 6,
                                  child: ElevatedButton(
                                      style: secondaryBtnStyle(
                                          second, Colors.transparent, primary),
                                      onPressed: () {
                                        if (_formKey.currentState!
                                            .saveAndValidate()) {
                                                  final progress =
                                              ProgressHUD.of(context);
                                               progress?.showWithText(
                                              'Logging in...',
                                            );
                                          context.read<UserBloc>().add(UuidLogin(uuid: state.uuid,password: _formKey.currentState!.value['password']));
                                
                                        }
                                      },
                                      child: const Text(submit)),
                                )
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                }
                return Container();
              },
            ),
          ),
        ),
      ),
    );
  }
}