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

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

  @override
  State<DropdownListScreen> createState() => _DropdownListScreenState();
}

class _DropdownListScreenState extends State<DropdownListScreen> {
  final professionRepository = Injector.appInstance.get<ProfessionRepository>();
  List<String>? _professions;
  List<String>? _filteredProfessions;
  String? _selectedProfession;
  bool _isLoading = true;

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

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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profesiones'),
      ),
      body: Column(
        children: [
          _isLoading
              ? _buildShimmerEffect()
              : Expanded(
                  child: _filteredProfessions != null &&
                          _filteredProfessions!.isNotEmpty
                      ? DropdownButton<String>(
                          isExpanded: true,
                          value: _selectedProfession,
                          hint: const Text('Seleccione una profesión'),
                          items: _filteredProfessions!.map((String profession) {
                            return DropdownMenuItem<String>(
                              value: profession,
                              child: Text(profession),
                            );
                          }).toList(),
                          onChanged: (String? newValue) {
                            setState(() {
                              _selectedProfession = newValue;
                            });
                          },
                        )
                      : 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),
              ),
            )
          ],
        ),
      ),
    );
  }
}