import 'package:flutter/material.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:rogapp/model/destination.dart';
import 'package:rogapp/pages/destination/destination_controller.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/utils/const.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';

class ListWidget extends StatelessWidget {
  ListWidget({ Key? key }) : super(key: key);

  final IndexController indexController = Get.find<IndexController>();
  final DestinationController destinationController = Get.find<DestinationController>();

  Image getImage(int index){
    if(indexController.locations[0].collection[index].properties!["photos"] == null || indexController.locations[0].collection[index].properties!["photos"] == ""){
      return const Image(image: AssetImage('assets/images/empty_image.png'));
    }
    else{
      print("==== photo index is $index ===");
      String serverUrl = ConstValues.currentServer();
      GeoJsonFeature<dynamic> gf = indexController.locations[0].collection[index];
      String photo = gf.properties!["photos"];
      return Image(
        image: NetworkImage(
          '$serverUrl/media/compressed/$photo'
          ),
        errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
          return Image.asset("assets/images/empty_image.png");
        },
        );
    }
  }

  void changeCurrentFeature(GeoJsonFeature fs){
    if(indexController.currentFeature.isNotEmpty){
      indexController.currentFeature.clear();
    }
    indexController.currentFeature.add(fs);
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() =>
              indexController.locations.isNotEmpty ?
              ListView.builder(
              itemCount: indexController.locations[0].collection.length,
              shrinkWrap: true,
              itemBuilder: (_, index){
                bool isFound = false;
                for(Destination d in destinationController.destinations){
                  if(indexController.locations[0].collection[index].properties!['location_id'] == d.location_id){
                    isFound = true;
                    break;
                  }
                }
                return Card(
                  child: ListTile(
                    selected: isFound,
                    
                    selectedTileColor: Colors.yellow.shade200,
                    onTap: (){
                      GeoJsonFeature gf = indexController.locations[0].collection[index];
                      changeCurrentFeature(gf);
                      showModalBottomSheet(
                          isScrollControlled: true,
                          context: context,
                          //builder: (context) => BottomSheetWidget(),
                          builder:((context) => BottomSheetNew())
                        );
                    },
                    leading: getImage(index),
                    title: indexController.locations[0].collection[index].properties!['location_name'] != null ? Text(indexController.locations[0].collection[index].properties!['location_name'].toString()) : const Text(""),
                    subtitle: indexController.locations[0].collection[index].properties!['category'] != null ? Text(indexController.locations[0].collection[index].properties!['category']) : const Text(""),
                    trailing: indexController.locations[0].collection[index].properties!['sub_loc_id'] != null ? Text(indexController.locations[0].collection[index].properties!['sub_loc_id']) : const Text(""),
                  ),
                );
              },
            ) : const SizedBox(width: 0, height: 0,),
            );
  }
}