"use strict";

import $ from "jquery";

$(() => {
  const $searchLat = $('[name="search-lat"]');
  const $searchLng = $('[name="search-lng"]');
  const $nearbyLat = $("#nearby-lat");
  const $nearbyLng = $("#nearby-lng");
  const $radius = $("#distance-radius");
  const $category = $("#distance-category");
  const $newLocation = $('[name="newlocation"]');
  const $setnewlocation = $("#setnewlocation");
  const $newlocationholder = $(".set-newlocation-holder");

  const updatePosition = (lat, lng) => {
    $searchLat.val(lat);
    $searchLng.val(lng);
    $nearbyLat.val(lat);
    $nearbyLng.val(lng);

    $searchLat.change();
    $nearbyLat.change();
  };

  const getGeoPosition = () => {
    const newLocation = $newLocation.val();
    if (!newLocation.length) {
      return;
    }

    $(".search-location .current-val").text(newLocation);
    const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`;

    $.getJSON(geoUrl).done((data) => {
      if (data.status === "OK") {
        updatePosition(
          data.results[0].geometry.location.lat,
          data.results[0].geometry.location.lng
        );
        //getCategories();
      }
    });
  };

  const getCurrentPosition = () => {
    $(".search-location .current-val").text("Current Location");

    navigator.geolocation.getCurrentPosition(
      (position) => {
        updatePosition(position.coords.latitude, position.coords.longitude);
        //hideDistancesThatDontMatter();
      },
      () => {
        $(".search-location .current-val").text("Unable to get your location");
        updatePosition("", "");
      }
    );
  };

  if ($newLocation.length && $newLocation.val().length) {
    getGeoPosition();
  } else {
    getCurrentPosition();
  }

  $("#Form_SearchForm").on("keyup keypress", (e) => {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      e.preventDefault();
      return false;
    }
  });

  $(".get-current-location").on("click", (e) => {
    e.preventDefault();

    getCurrentPosition();
    $newlocationholder.toggle();
    $newLocation.val("");
  });

  $setnewlocation.on("click", (e) => {
    e.preventDefault();

    $newlocationholder.toggle();
  });

  $newLocation.blur(() => {
    getGeoPosition();
  });

  $(".new-search").on("click", (e) => {
    e.preventDefault();

    $(".section-search-secondary").animate(
      {
        "max-height": 300,
      },
      "slow"
    );
  });

  /*$radius.on('change', () => {
        getCategories();
    });
    function getCategories() {
        $.getJSON(`/api/categoriesnearby/${$searchLat.val()}/${$searchLng.val()}/${$radius.val()}`)
            .done((data) => {
                $category.empty(); // remove old options
                $category.append($('<option></option>').attr('value', 'all').text('All Categories'));

                $.each(data.categories, (i, cat) => {
                    $category.append($('<option></option>').attr('value', cat.id).text(cat.name));
                });
            });
    }

    function hideDistancesThatDontMatter() {
        $.getJSON(`/api/nearestevent/${ $searchLat.val()}/${$searchLat.val()}`)
            .done((data) => {
                const nearest = parseFloat(data);

                $radius.find('option').each(function() {
                    if (this.value !== 'all' && parseFloat(this.value) < nearest) {
                        $(this).hide();
                    }
                });
            });
    }*/

  const $map = $("#Map");
  if (typeof google !== "undefined" && $map.length) {
    const $directions = $("#DirectionsPanel"),
      $fromAddress = $("#FromAddress"),
      $getDirections = $("#GetDirections"),
      $directionContainer = $("#DirectionContainer"),
      directionsDisplay = new google.maps.DirectionsRenderer(),
      directionsService = new google.maps.DirectionsService(),
      currentPosition = {
        lat: $map.data("lat"),
        lng: $map.data("lng"),
      },
      map = new google.maps.Map($map[0], {
        zoom: 15,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel($directions[0]);

    map.setCenter(currentPosition);
    new google.maps.Marker({
      map,
      position: currentPosition,
    });

    $getDirections.click((e) => {
      e.preventDefault();

      const fromLocation = $fromAddress.val();

      if (fromLocation.length) {
        directionsService.route(
          {
            origin: fromLocation,
            destination: currentPosition,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
          },
          (response, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          }
        );

        $directionContainer.slideDown();
      }
    });
  }
});