import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';

import '../../controllers/localization/localization.dart';
import '../../controllers/providers/user_provider.dart';
import '../../controllers/validator/validator.dart';
import '../../models/hospital.dart';
import '../../models/subtitle.dart';
import '../../models/user.dart';
import '../widgets/app_text_form_field.dart';
import '../widgets/buttons/app_back_button.dart';
import '../widgets/buttons/app_button.dart';
import '../widgets/departments/department_button.dart';
import '../widgets/hospitals/hospital_button.dart';
import '../widgets/loaders/loading_manager.dart';

class Register extends StatefulWidget {
  static const String id = "/register";

  const Register({super.key});

  @override
  RegisterState createState() => RegisterState();
}

class RegisterState extends State<Register> {
  late UserProvider _userProvider;
  late double _height;
  final User _user = User();
  bool _obscurePassword = true;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    _userProvider = Provider.of<UserProvider>(context);
    _height = MediaQuery.of(context).size.height;
    Subtitle? subtitle = AppLocalization.of(context)?.subtitle;
    return Scaffold(
      key: _scaffoldKey,
      body: LoadingManager(
        isLoading: _userProvider.loading,
        isFailedLoading: false,
        stateCode: 200,
        onRefresh: () async {},
        child: SafeArea(
          child: Stack(
            children: [
              Form(
                key: _formKey,
                child: ListView(
                  padding: const EdgeInsets.all(20),
                  children: [
                    //AppNameBar(),
                    //SizedBox(height: 16,),
                    Hero(
                      tag: "logo",
                      child: Padding(
                        padding: const EdgeInsets.all(16),
                        child: Image(
                          height: _height / 6,
                          image: const AssetImage("assets/images/logo.png"),
                        ),
                      ),
                    ),
                    ATextFormField(
                      initialValue: _user.userName,
                      hintText: subtitle?.name ?? "",
                      prefixIconData: Icons.account_circle,
                      style: Theme.of(context).textTheme.titleLarge,
                      validator: (value) => Validator.hasValue(value!) ? '' : subtitle?.nameValidateMessage ?? "",
                      onSaved: (value) {
                        _user.userName = value!;
                      },
                    ),
                    const SizedBox(height: 12),
                    ATextFormField(
                      initialValue: _user.email,
                      hintText: subtitle?.email ?? "",
                      prefixIconData: Icons.email,
                      textInputType: TextInputType.emailAddress,
                      style: Theme.of(context).textTheme.titleLarge,
                      validator: (value) => Validator.isEmail(value!) ? '' : subtitle?.emailValidateMessage ?? "",
                      onSaved: (value) {
                        _user.email = value!;
                      },
                    ),
                    const SizedBox(height: 12),
                    ATextFormField(
                      initialValue: _user.password,
                      hintText: subtitle?.password ?? "",
                      prefixIconData: Icons.vpn_key_sharp,
                      style: Theme.of(context).textTheme.titleLarge,
                      obscureText: _obscurePassword,
                      validator: (value) => Validator.isValidPassword(value!) ? '' : subtitle?.passwordValidateMessage ?? '',
                      showPassword: () {
                        _obscurePassword = !_obscurePassword;
                        setState(() {});
                      },
                      onSaved: (value) {
                        _user.password = value!;
                      },
                      onChange: (value) {
                        _user.password = value;
                      },
                    ),
                    const SizedBox(height: 12),
                    ATextFormField(
                      initialValue: _user.password,
                      prefixIconData: Icons.vpn_key_sharp,
                      hintText: subtitle?.confirmPassword ?? "",
                      style: Theme.of(context).textTheme.titleLarge,
                      obscureText: _obscurePassword,
                      validator: (value) => _user.password == value ? '' : subtitle?.confirmPasswordValidateMessage ?? "",
                      showPassword: () {
                        _obscurePassword = !_obscurePassword;
                        setState(() {});
                      },
                    ),
                    const SizedBox(height: 12),
                    HospitalButton(
                      hospital: _user.hospital ?? Hospital(),
                      onHospitalPick: (hospital) {
                        _user.hospital = hospital;
                        setState(() {});
                      },
                    ),
                    const SizedBox(height: 12),
                    DepartmentButton(
                      department: _user.department,
                      onDepartmentPick: (department) {
                        _user.department = department;
                        setState(() {});
                      },
                    ),
                    const SizedBox(height: 12),
                    ATextFormField(
                      initialValue: _user.phoneNumber ?? "",
                      hintText: subtitle?.phoneNumber ?? "",
                      style: Theme.of(context).textTheme.titleLarge,
                      prefixIconData: Icons.phone_android,
                      validator: (value) => Validator.isPhoneNumber(value!) ? '' : subtitle?.phoneNumberValidateMessage ?? "",
                      textInputType: TextInputType.phone,
                      onSaved: (value) {
                        _user.phoneNumber = value;
                      },
                    ),
                    const SizedBox(height: 8),
                    ATextFormField(
                      initialValue: _user.whatsApp ?? "",
                      hintText: subtitle?.whatsApp ?? "",
                      style: Theme.of(context).textTheme.titleLarge,
                      prefixIconData: FontAwesomeIcons.whatsapp,
                      prefixIconSize: 36,
                      validator: (value) => (Validator.isPhoneNumber(value!)) ? "" : subtitle?.phoneNumberValidateMessage ?? "",
                      textInputType: TextInputType.phone,
                      onSaved: (value) {
                        _user.whatsApp = value;
                      },
                    ),
                    const SizedBox(height: 12),
                    AButton(
                      text: subtitle?.signUp ?? "",
                      onPressed: () async {
                        if (_formKey.currentState?.validate() ?? false) {
                          _formKey.currentState?.save();
                          await _userProvider.register(context, newUser: _user);
                        }
                      },
                    ),
                  ],
                ),
              ),
              const ABackButton(),
            ],
          ),
        ),
      ),
    );
  }
}
