import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';
import 'package:prosappco/blocs/my_user_bloc/my_user_bloc.dart';
import 'package:prosappco/blocs/profile_bloc/profile_bloc.dart';
import 'package:prosappco/src/components/pop_appbar.dart';

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

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final TextEditingController _nameController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<ProfileBloc, ProfileState>(
      listener: (context, state) {
        if (state is UploadPictureSuccess) {
          setState(() {});
        }
      },
      child: Scaffold(
        appBar: PopAppbar(
          onPressed: () {
            Navigator.pop(context);
          },
          label: 'Perfil',
        ),
        body: BlocBuilder<MyUserBloc, MyUserState>(builder: (context, state) {
          if (state.status == MyUserStatus.success) {
            _nameController.text = state.user!.name;

            return Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  GestureDetector(
                    onTap: () async {
                      final ImagePicker picker = ImagePicker();
                      final XFile? image = await picker.pickImage(
                        source: ImageSource.gallery,
                        maxHeight: 500,
                        maxWidth: 500,
                        imageQuality: 40,
                      );

                      if (image != null) {
                        context.read<ProfileBloc>().add(
                              UploadPicture(image.path, state.user!.id),
                            );
                      }
                    },
                    child: state.user!.picture == ""
                        ? Container(
                            width: 120,
                            height: 120,
                            decoration: BoxDecoration(
                              color: Colors.grey.shade300,
                              shape: BoxShape.circle,
                            ),
                            child: Icon(
                              CupertinoIcons.person,
                              color: Colors.grey.shade400,
                              size: 40,
                            ),
                          )
                        : Container(
                            width: 150,
                            height: 150,
                            decoration: BoxDecoration(
                              color: Colors.grey,
                              shape: BoxShape.circle,
                              image: DecorationImage(
                                image: NetworkImage(
                                  context
                                      .read<MyUserBloc>()
                                      .state
                                      .user!
                                      .picture!,
                                ),
                                fit: BoxFit.contain,
                              ),
                            ),
                          ),
                  ),
                  const SizedBox(height: 20.0),
                  TextFormField(
                    controller: _nameController,
                    decoration: const InputDecoration(
                      labelText: 'Nombre',
                      prefixIcon: Icon(Icons.person),
                      hintText: 'Nombre (obligatorio)',
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(
                        Radius.circular(25.0),
                      )),
                      errorBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red),
                      ),
                      focusedErrorBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red, width: 2.0),
                      ),
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Por favor, ingrese su nombre';
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 20.0),
                  TextFormField(
                    decoration: const InputDecoration(
                      labelText: 'Nombre',
                      prefixIcon: Icon(Icons.person),
                      hintText: 'Nombre (obligatorio)',
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(
                        Radius.circular(25.0),
                      )),
                      errorBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red),
                      ),
                      focusedErrorBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red, width: 2.0),
                      ),
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Por favor, ingrese su nombre';
                      }
                      return null;
                    },
                  ),
                  ElevatedButton(
                    onPressed: () {
                      context.read<ProfileBloc>().add(
                          UpdateUserInfo(state.user!.id, _nameController.text));
                    },
                    child: const Text('Guardar'),
                  ),
                ],
              ),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        }),
      ),
    );
  }
}