import 'package:flutter/material.dart';
import 'package:injector/injector.dart';
import 'package:intl_phone_field/helpers.dart';
import 'package:profession_repository/profession_repository.dart';
import 'package:shimmer/shimmer.dart';

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

  @override
  State<ProfessionListScreen> createState() => _ProfessionListScreenState();
}

class _ProfessionListScreenState extends State<ProfessionListScreen> {
  final _searchController = TextEditingController();
  final professionRepository = Injector.appInstance.get<ProfessionRepository>();
  List<String>? _professions;
  List<String>? _filteredProfessions;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadProfessions();
  }

  void _loadProfessions() {
    professionRepository.getProfessions().then((Professions element) {
      setState(() {
        _professions = element.professions;
        _filteredProfessions = _professions;
        _isLoading = false;
      });
    });
  }

  void _filterProfessions(String query) {
    if (_professions != null) {
      setState(() {
        _filteredProfessions = _professions!
            .where((profession) => removeDiacritics(profession.toLowerCase())
                .contains(removeDiacritics(query.toLowerCase())))
            .toList();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profesiones'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _searchController,
            onChanged: (value) {
              _filterProfessions(value);
            },
            decoration: const InputDecoration(
              hintText: 'Busca una profesión',
              prefixIcon: Icon(Icons.search),
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
            ),
          ),
          _isLoading
              ? _buildShimmerEffect()
              : Expanded(
                  child: _filteredProfessions != null &&
                          _filteredProfessions!.isNotEmpty
                      ? ListView.builder(
                          itemCount: _filteredProfessions!.length,
                          itemBuilder: (BuildContext context, int index) {
                            final profession = _filteredProfessions![index];
                            return Container(
                              decoration: BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                      color: Colors.grey.withOpacity(0.2)),
                                ),
                              ),
                              child: ListTile(
                                title: Text(profession),
                                onTap: () {
                                  Navigator.pop(
                                      context, _filteredProfessions![index]);
                                },
                              ),
                            );
                          },
                        )
                      : const Center(
                          child: Text('No se encontraron coincidencias'),
                        ),
                )
        ],
      ),
    );
  }

  Widget _buildShimmerEffect() {
    return Expanded(
      child: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: ListView.builder(
          itemCount: 8,
          itemBuilder: (_, __) => const ListTileShimmer(),
        ),
      ),
    );
  }
}

class ListTileShimmer extends StatelessWidget {
  const ListTileShimmer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Colors.grey.withOpacity(0.4)),
        ),
      ),
      child: ListTile(
        title: Row(
          children: [
            Container(
              width: MediaQuery.of(context).size.width * 0.8,
              height: 20.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
            ),
          ],
        ),
        subtitle: Row(
          children: [
            Container(
              width: MediaQuery.of(context).size.width * 0.3,
              height: 15.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
            ),
            const SizedBox(width: 5),
            Container(
              width: MediaQuery.of(context).size.width * 0.3,
              height: 15.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
            )
          ],
        ),
      ),
    );
  }
}