import 'package:flutter/material.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/models/APiResponse.dart';
import 'package:job_app/models/categories.dart';
import 'package:job_app/models/city.dart';
import 'package:job_app/models/distance.dart';
import 'package:job_app/models/employmentoffer.dart';
import 'package:job_app/models/jobType.dart';
import 'package:job_app/models/jobTypes.dart';
import 'package:job_app/services/categoriesService.dart';
import 'package:job_app/services/employmentOffersService.dart';
import 'package:job_app/services/jobTypesService.dart';
import 'package:job_app/singletons/categories.dart';
import 'package:job_app/singletons/job_types.dart';
import 'package:job_app/widgets/ads_container.dart';
import 'package:job_app/widgets/employment_offer_card.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'company_details.dart';


class Search extends StatefulWidget {
  Search({Key key}) : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}


class _SearchState extends State<Search> {
  String distanceValue;
  String jobTypeValue;
  String categoryValue;
  String cityValue;
  dynamic distanceItems = distanceList;
  dynamic cityItems = cityList;

  JobTypesService jobTypesService=JobTypesService();
  List<JobTypeModel> jobTypesList=[];

  String searchKey="";
  int pageNumber = 0;
  int totalItems;
  int totalPages;
  List<EmploymentofferModel> employmentOffers=[]; // for filtering
  List<EmploymentofferModel> _foundOffers=[]; //
  RefreshController _refreshController =
  RefreshController(initialRefresh: false);
  EmploymentOffersService _employmentOffersService=EmploymentOffersService();
  Future<void> getAllTypes()async{
    ApiResponseModel response =await jobTypesService.getJobTypes();
    if(response.statusCode==200 || response.statusCode==201){
      setState(() {
        jobTypesList=response.data;
      });
    }
  }

  Future<void> getAllOffers() async {
    ApiResponseModel response = await _employmentOffersService.getAllOffers(size: 10,page: pageNumber);
    setState(() {
      employmentOffers=response.data.offers;
      totalItems=response.data.totalItems;
      totalPages=response.data.totalPages;
      _foundOffers=employmentOffers;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getAllTypes();
    getAllOffers();

  }
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        backgroundColor: Color.fromRGBO(240, 245, 249, 1),
        body: Container(
          margin: EdgeInsets.only(top: 30),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Search Jobs",
                    style: TextStyle(
                        fontFamily: 'MontserratSemiBold',
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Colors.black),
                  ),
                ],
              ),
              SizedBox(
                height: 40,
              ),
              Container(height: 38, width: 320, child: searchTextField(context)),
              SizedBox(
                height: 20,
              ),
              Text(
                "Sort by",
                style: TextStyle(
                    fontFamily: 'MontserratSemiBold',
                    fontSize: 18,
                    color: Colors.black),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(15, 20, 15, 0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    distanceDropDown(),
                    SizedBox(
                      height: 10,
                    ),
                    jobTypeDropDown(context),
                    SizedBox(
                      height: 10,
                    ),
                    categoryDropDown(context),
                    SizedBox(
                      height: 10,
                    ),
                    cityDropDown(),
                  ],
                ),
              ),

              Padding(
                padding: const EdgeInsets.only(top:30,left: 30),
                child: Row(
                  children: [
                    Text(
                      "30 job opportunity found",
                      style: TextStyle(
                          fontFamily: 'MontserratSemiBold',
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(top: 18.0),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 18.0),
                    child: ListView.separated(
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, i) => GestureDetector(
                            onTap: (){
                              Navigator.push<void>(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) =>
                                          CompanyDetails(
                                            offerIndex: i,
                                          )));
                            },
                            child: EmploymentOfferCard(offerIndex: i,passedOffers: employmentOffers,)),
                        separatorBuilder: (context, i) {
                          return Container(
                            child: (i != 0 && i % 4 == 0) ? AdsContainer(i) : null,
                          );
                        },
                        itemCount:  employmentOffers.length)
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

  }


  Container distanceDropDown() {
    return Container(
      padding: EdgeInsets.all(5),
      height: 30,
      width: 320,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 7,
            offset: Offset(0, 3),
          )
        ],
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: distanceValue,
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          iconSize: 20,
          elevation: 16,
          isExpanded: true,
          style: const TextStyle(
              color: Colors.black,
              fontSize: 10,
              fontWeight: FontWeight.bold,
              fontFamily: 'MontserratExtraLight'),
          onChanged: (String newValue) {
            setState(() {
              distanceValue = newValue;
            });
          },
          items: distanceItems.map<DropdownMenuItem<String>>((Distance value) {
            return DropdownMenuItem<String>(
              value: value.name,
              child: Text(value.name),
            );
          }).toList(),
          hint: Text(
            "Distance",
            style: TextStyle(
                color: Colors.black,
                fontSize: 10,
                fontWeight: FontWeight.bold,
                fontFamily: 'MontserratExtraLight'),
          ),
        ),
      ),
    );
  }
  Widget jobTypeDropDown(context) {
    return ChangeNotifierProvider.value(
      value: JobTypesSingleTons(),
      child: Container(
        padding: EdgeInsets.all(5),
        height: 30,
        width: 320,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 1,
              blurRadius: 7,
              offset: Offset(0, 3),
            )
          ],
        ),
        child: Consumer<JobTypesSingleTons>(
          builder: (context,data,child){
            return DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: jobTypeValue,
                icon: const Icon(Icons.keyboard_arrow_down_rounded),
                iconSize: 20,
                elevation: 16,
                isExpanded: true,
                style: const TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'MontserratExtraLight'),
                onChanged: (String newValue) {
                  setState(() {
                    jobTypeValue = newValue;
                  });
                },
                items: jobTypesList.map<DropdownMenuItem<String>>((JobTypeModel value) {
                  return DropdownMenuItem<String>(
                    value: value.name,
                    child: Text(value.name),
                  );
                }).toList(),
                hint: Text(
                  "Job Type",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 10,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'MontserratExtraLight'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
  Widget categoryDropDown(context) {
    return ChangeNotifierProvider.value(
      value: CategoriesSingleTons(),
      child: Container(
        padding: EdgeInsets.all(5),
        height: 30,
        width: 320,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 1,
              blurRadius: 7,
              offset: Offset(0, 3),
            )
          ],
        ),
        child: Consumer<CategoriesSingleTons>(
          builder: (context,data,child){
            return DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: categoryValue,
                icon: const Icon(Icons.keyboard_arrow_down_rounded),
                iconSize: 20,
                elevation: 16,
                isExpanded: true,
                style: const TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'MontserratExtraLight'),
                onChanged: (String newValue) {
                  setState(() {
                    categoryValue = newValue;
                  });
                  
                },
                items: data.categories.map<DropdownMenuItem<String>>((CategoriesModel value) {
                  return DropdownMenuItem<String>(
                    value: value.name,
                    child: Text(value.name),

                  );
                }).toList(),
                hint: Text(
                  "Category",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 10,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'MontserratExtraLight'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
  Container cityDropDown() {
    return Container(
      padding: EdgeInsets.all(5),
      height: 30,
      width: 320,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 7,
            offset: Offset(0, 3),
          )
        ],
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: cityValue,
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          iconSize: 20,
          elevation: 16,
          isExpanded: true,
          style: const TextStyle(
              color: Colors.black,
              fontSize: 10,
              fontWeight: FontWeight.bold,
              fontFamily: 'MontserratExtraLight'),
          onChanged: (String newValue) {
            setState(() {
              cityValue = newValue;
            });
          },
          items: cityItems.map<DropdownMenuItem<String>>((City value) {
            return DropdownMenuItem<String>(
              value: value.name,
              child: Text(value.name),
            );
          }).toList(),
          hint: Text(
            "City",
            style: TextStyle(
                color: Colors.black,
                fontSize: 10,
                fontWeight: FontWeight.bold,
                fontFamily: 'MontserratExtraLight'),
          ),
        ),
      ),
    );
  }
  searchTextField(context) {
    return TextField(
      onChanged: (string){
        searchKey=string;
      },
        autocorrect: false,
        style: TextStyle(
            fontSize: 17, height: 1, color: Colors.black),
        cursorColor: Palette.primary,
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          hintStyle: TextStyle(decoration: TextDecoration.none, color: Color.fromRGBO(112, 112, 112, 0.5)),
          prefixIcon: Icon(
            Icons.search,
            color: Color.fromRGBO(112, 112, 112, 0.5),
          ),
          hintText: "Keyword",
          fillColor: Colors.white,
          filled: true,
          contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 10),
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(3),
              borderSide:
              BorderSide(color: Color.fromRGBO(112, 112, 112, 0.5))),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(3),
              borderSide: BorderSide(color: Color.fromRGBO(112, 112, 112, 0.5))),
        ));

  }

}