import 'package:city_repository/city_repository.dart';
import 'package:flutter/material.dart';
import 'package:injector/injector.dart';
import 'package:intl_phone_field/helpers.dart';
import 'package:prosappco/src/components/pop_appbar.dart';
import 'package:shimmer/shimmer.dart';

class CityScreen extends StatefulWidget {
  const CityScreen({Key? key}) : super(key: key);

  @override
  State<CityScreen> createState() => _CityScreenState();
}

class _CityScreenState extends State<CityScreen> {
  final _searchController = TextEditingController();
  final cityRepository = Injector.appInstance.get<CityRepository>();
  List<CityUi>? _cities;
  List<CityUi>? _filteredCities;

  bool _isLoading = true;

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

  void _loadCities() {
    cityRepository.getCities().then((List<CityUi> element) {
      setState(() {
        _cities = element;
        _filteredCities = _cities;
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: PopAppbar(
          onPressed: () {
            Navigator.pop(context);
          },
          label: 'Ciudad',
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
              child: TextField(
                controller: _searchController,
                onChanged: (value) {
                  _filterCities(value);
                },
                decoration: const InputDecoration(
                  hintText: 'Busca una ciudad',
                  prefixIcon: Icon(Icons.search),
                ),
              ),
            ),
            _isLoading
                ? _buildShimmerEffect()
                : Expanded(
                    child: _filteredCities != null && _filteredCities!.isNotEmpty
                        ? ListView.builder(
                            itemCount: _filteredCities!.length,
                            itemBuilder: (BuildContext context, int index) {
                              return ListTile(
                                title: Text(
                                  _filteredCities![index].cityName,
                                  style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),
                                subtitle: Text(
                                  "${_filteredCities![index].stateOfCity}, ${_filteredCities![index].countryOfCity}",
                                  style: const TextStyle(color: Colors.black54),
                                ),
                                onTap: () {
                                  // Handle city selection
                                },
                              );
                            },
                          )
                        : const Center(
                            child: Text('No se encontraron ciudades.'),
                          ),
                  ),
          ],
        ),
      ),
    );
  }

  void _filterCities(String query) {
    if (_cities != null) {
      setState(() {
        _filteredCities = _cities!
            .where((city) => removeDiacritics(city.cityName.toLowerCase())
                .contains(removeDiacritics(query.toLowerCase())))
            .toList();
      });
    }
  }

  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 ListTile(
      title: Row(
        children: [
          Container(
            width: MediaQuery.of(context).size.width * 0.8,
            height: 18.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),
            ),
          )
        ],
      ),
    );
  }
}