import 'dart:io';

import 'package:flutter/material.dart';
import 'package:intl/intl.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/components/birth_date_picker.dart';
import 'package:prosappco/components/gender_dropdown.dart';
import 'package:prosappco/components/general_primary_button.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();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _birthDateController = TextEditingController();
  final TextEditingController _genderController = TextEditingController();
  XFile? _imageFile;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _phoneController.dispose();
    _birthDateController.dispose();
    _genderController.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 ?? '';
            _emailController.text = state.user!.email ?? '';
            _phoneController.text = state.user!.phone ?? '';

            return SingleChildScrollView(
              child: 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));
                          setState(() {
                            _imageFile = image;
                          });
                        }
                      },
                      child: state.user!.picture == "" ||
                              state.user!.picture == null
                          ? _imageFile != null
                              ? Container(
                                  width: 150,
                                  height: 150,
                                  decoration: BoxDecoration(
                                    color: Colors.grey,
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                      image: FileImage(File(_imageFile!.path)),
                                      fit: BoxFit.contain,
                                    ),
                                  ),
                                )
                              : 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(10.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(
                      controller: _emailController,
                      decoration: const InputDecoration(
                        labelText: 'Email',
                        prefixIcon: Icon(Icons.email_rounded),
                        hintText: 'Email',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                          Radius.circular(10.0),
                        )),
                        errorBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red),
                        ),
                        focusedErrorBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red, width: 2.0),
                        ),
                      ),
                    ),
                    const SizedBox(height: 20.0),
                    TextFormField(
                      controller: _phoneController,
                      decoration: const InputDecoration(
                        labelText: 'Número de Teléfono',
                        prefixIcon: Icon(Icons.phone_android_rounded),
                        hintText: '+57',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                          Radius.circular(10.0),
                        )),
                        errorBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red),
                        ),
                        focusedErrorBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red, width: 2.0),
                        ),
                      ),
                    ),
                    const SizedBox(height: 20.0),
                    BirthDatePicker(
                      onDateSelected: (birthDay) {
                        _birthDateController.text =
                            DateFormat('dd/MM/yyyy').format(birthDay);
                      },
                      controller: _birthDateController,
                    ),
                    const SizedBox(height: 20.0),
                    GenderDropdown(onChanged: (selectedGender) {
                      _genderController.text = selectedGender;
                    }),
                    ElevatedButton(
                      onPressed: () {
                        context.read<ProfileBloc>().add(
                              UpdateUserInfo(
                                userId: state.user!.id,
                                picture: _imageFile?.path ??
                                    state.user!.picture ??
                                    '',
                                name: _nameController.text.isEmpty
                                    ? null
                                    : _nameController.text,
                                nickname:
                                    _nameController.text.trim().toLowerCase(),
                                email: _emailController.text.isEmpty
                                    ? null
                                    : _emailController.text,
                                phone: _phoneController.text.isEmpty
                                    ? null
                                    : _phoneController.text,
                                birthDate: _birthDateController.text,
                                gender: _genderController.text,
                              ),
                            );
                      },
                      child: const Text('Guardar'),
                    ),
                  ],
                ),
              ),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        }),
      ),
    );
  }
}