import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/pages/search/search_controller.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';

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

  SearchBarController searchController = Get.find<SearchBarController>();
  IndexController indexController = Get.find<IndexController>();

  Image getImage(int index) {
    if (searchController.searchResults[index].properties!["photos"] == null ||
        searchController.searchResults[index].properties!["photos"] == "") {
      return const Image(image: AssetImage('assets/images/empty_image.png'));
    } else {
      return Image(
        image: NetworkImage(
            searchController.searchResults[index].properties!["photos"]),
        errorBuilder:
            (BuildContext context, Object exception, StackTrace? stackTrace) {
          return Image.asset("assets/images/empty_image.png");
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
            onPressed: () {
              Get.back();
            },
            icon: const Icon(
              Icons.arrow_back_ios_new,
              color: Colors.black,
            )),
        centerTitle: true,
        //title: const CupertinoSearchTextField(),
      ),
      body: SingleChildScrollView(
        child: TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
            autofocus: true,
            style: DefaultTextStyle.of(context).style.copyWith(
                  fontStyle: FontStyle.normal,
                  fontSize: 15.0,
                ),
            decoration: InputDecoration(
              border: const OutlineInputBorder(),
              hintText: "検索",
              prefixIcon: const Icon(Icons.search),
              suffixIcon: IconButton(
                icon: const Icon(Icons.clear),
                onPressed: () {
                  // clear the text field
                },
              ),
            ),
          ),
          suggestionsCallback: (pattern) async {
            return searchController.searchResults.where(
                (GeoJsonFeature element) => element.properties!["location_name"]
                    .toString()
                    .contains(pattern));
            //return await
          },
          itemBuilder: (context, GeoJsonFeature suggestion) {
            return ListTile(
              title: Text(suggestion.properties!["location_name"]),
              subtitle: suggestion.properties!["category"] != null
                  ? Text(suggestion.properties!["category"])
                  : const Text(""),
              //leading: getImage(index),
            );
          },
          onSuggestionSelected: (GeoJsonFeature suggestion) {
            indexController.currentFeature.clear();
            indexController.currentFeature.add(suggestion);
            Get.back();
            showModalBottomSheet(
                constraints:
                    BoxConstraints.loose(Size(Get.width, Get.height * 0.75)),
                isScrollControlled: true,
                context: context,
                //builder: (context) => BottomSheetWidget(),
                builder: ((context) => BottomSheetNew()));
          },
        ),
      ),
      // Obx(() =>
      //   ListView.builder(
      //   itemCount: searchController.searchResults.length,
      //   itemBuilder: (context, index){
      //     return ListTile(
      //       title: searchController.searchResults[index].properties!["location_name"] != null ? Text(searchController.searchResults[index].properties!["location_name"]) : Text(""),
      //       subtitle: searchController.searchResults[index].properties!["category"] != null ? Text(searchController.searchResults[index].properties!["category"]) : Text(""),
      //       leading: getImage(index),
      //       onTap: (){
      //         indexController.currentFeature.clear();
      //         indexController.currentFeature.add(searchController.searchResults[index]);
      //         Get.back();
      //         showModalBottomSheet(
      //                     isScrollControlled: true,
      //                     context: context,
      //                     //builder: (context) => BottomSheetWidget(),
      //                     builder:((context) => BottomSheetNew())
      //                   );
      //       },
      //     );
      //   },
      // ),
      // )
    );
  }
}