import 'dart:io';
import 'package:flutter/material.dart';
import 'package:injector/injector.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';
import 'package:prosappco/blocs/auth_bloc/auth_bloc.dart';
import 'package:prosappco/blocs/my_user_bloc/my_user_bloc.dart';
import 'package:prosappco/blocs/professional_bloc/professional_bloc.dart';
import 'package:prosappco/screens/profession/profession_screen.dart';

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

  @override
  State<ProfessionalFormScreen> createState() => _ProfessionalFormScreenState();
}

class _ProfessionalFormScreenState extends State<ProfessionalFormScreen> {
  final TextEditingController _cedulaController = TextEditingController();
  final TextEditingController _professionController = TextEditingController();
  final TextEditingController _controller = TextEditingController();
  final List<String> _items = [];

  XFile? _imageFile;

  late final AuthBloc authBloc;

  @override
  void initState() {
    super.initState();
    authBloc = Injector.appInstance.get<AuthBloc>();
  }

  @override
  void dispose() {
    _cedulaController.dispose();
    _professionController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Perfil profesional'),
        ),
        body: BlocBuilder<MyUserBloc, MyUserState>(
          builder: (context, state) {
            return SingleChildScrollView(
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    pictureWidget(state, context),
                    const SizedBox(height: 30),
                    TextFormField(
                      controller: _cedulaController,
                      decoration: const InputDecoration(
                        labelText: 'Cedula',
                        prefixIcon: Icon(Icons.assignment_ind),
                        hintText: 'Ingresa tu cedula',
                        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: _professionController,
                      readOnly: true,
                      onTap: () async {
                        final professionName = await Navigator.push(
                          context,
                          CupertinoPageRoute(
                            builder: (BuildContext context) {
                              return const ProfessionScreen();
                            },
                          ),
                        );

                        if (professionName != null) {
                          _professionController.text = professionName;
                        }
                      },
                      decoration: const InputDecoration(
                        labelText: 'Profesión',
                        prefixIcon: Icon(Icons.work_rounded),
                        hintText: 'Elige tu profesión',
                        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),
                    TextField(
                      controller: _controller,
                      onSubmitted: (value) {
                        _addItemToList();
                      },
                      decoration: InputDecoration(
                        labelText: 'Especializaciones',
                        prefixIcon: const Icon(Icons.assignment_rounded),
                        suffixIcon: IconButton(
                            onPressed: () {
                              _addItemToList();
                            },
                            icon: const Icon(Icons.add)),
                        hintText: 'Ingresa tus especializaciones',
                        border: const OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                          Radius.circular(10.0),
                        )),
                        errorBorder: const OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red),
                        ),
                        focusedErrorBorder: const OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red, width: 2.0),
                        ),
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    Wrap(
                      spacing: 8.0,
                      runSpacing: 4.0,
                      children: _items
                          .map((item) => Chip(
                                label: Text(item),
                                backgroundColor: Theme.of(context).primaryColor,
                                labelStyle:
                                    const TextStyle(color: Colors.white),
                                deleteIconColor: Colors.white,
                                onDeleted: () {
                                  _removeItemFromList(item);
                                },
                              ))
                          .toList(),
                    ),
                    const SizedBox(height: 60.0),
                    saveButton(state, context),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _addItemToList() {
    setState(() {
      String newItem = _controller.text.trim();
      if (newItem.isNotEmpty) {
        _items.add(newItem);
        _controller.clear();
      }
    });
  }

  void _removeItemFromList(String item) {
    setState(() {
      _items.remove(item);
    });
  }

  Widget saveButton(MyUserState state, BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        final userId = context.read<MyUserBloc>().state.user!.id;
        context.read<ProfessionalBloc>().add(SendProfessionalToReviewEvent(
              id: userId,
              identification: _cedulaController.text,
              identificationPicture: _cedulaController.text,
              profession: _professionController.text,
              certificatePicture: _professionController.text,
              specializations: _items,
              specializationsPictures: _items,
            ));

        // if (isLoading) {
        //   return;
        // }

        // if (_nameController.text.isEmpty) {
        //   ScaffoldMessenger.of(context).clearSnackBars();
        //   ScaffoldMessenger.of(context).showSnackBar(
        //       const SnackBar(content: Text('Por favor, ingrese su nombre')));

        //   return;
        // }

        // if (_cityController.text.isEmpty) {
        //   ScaffoldMessenger.of(context).clearSnackBars();
        //   ScaffoldMessenger.of(context).showSnackBar(
        //       const SnackBar(content: Text('Por favor, ingrese su ciudad')));
        // }

        // final myUser = state.user!.copyWith(
        //   name: _nameController.text,
        //   city: _cityController.text,
        //   nickname: _nameController.text.trim().toLowerCase(),
        //   email: _emailController.text,
        //   phone: _phoneController.text,
        //   birthday: _birthdayController.text,
        //   gender: _genderController.text,
        // );

        // context
        //     .read<ProfileBloc>()
        //     .add(UpdateUserInfo(myUser: myUser, filePicture: _imageFile?.path));

        ScaffoldMessenger.of(context).clearSnackBars();
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Información actualizada...')),
        );

        Navigator.pop(context);
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: const EdgeInsets.symmetric(vertical: 5),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50),
        ),
        shadowColor: Colors.grey,
        // elevation: 0,
      ),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
        alignment: Alignment.center,
        child: const Text(
          'Actualizar',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Widget pictureWidget(MyUserState state, BuildContext context) {
    final pictureUrl = state.user?.picture;
    final pathImageFile = _imageFile?.path;

    ImageProvider<Object>? imageProvider;

    if (pathImageFile != null && pathImageFile.isNotEmpty) {
      imageProvider = FileImage(File(pathImageFile));
    } else if (pictureUrl != null && pictureUrl.isNotEmpty) {
      imageProvider = NetworkImage(pictureUrl);
    }

    return 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) {
          setState(() {
            _imageFile = image;
          });
        }
      },
      child: Hero(
        tag: 'picture-profile',
        child: pictureContainerWidget(imageProvider),
      ),
    );
  }

  Widget pictureContainerWidget(ImageProvider<Object>? imageProvider) {
    final image = imageProvider == null
        ? null
        : DecorationImage(
            image: imageProvider,
            fit: BoxFit.contain,
          );

    final widget = image == null
        ? Icon(
            CupertinoIcons.person,
            color: Colors.grey.shade400,
            size: 40,
          )
        : null;

    return Container(
      width: 120,
      height: 120,
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        shape: BoxShape.circle,
        image: image,
      ),
      child: widget,
    );
  }
}