let panorama, myPlace, map;

let translations;

let pinURL = "";

const getLocation = () => {
  pinURL = document.getElementById("location-dot-url").href;
  const queryStr = window.location.search;
  const urlParams = new URLSearchParams(queryStr);
  if (urlParams.has("address") && urlParams.get("address") != "") {
    const address = decodeURI(urlParams.get("address"));
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: address }, (results, status) => {
      if (status == "OK") {
        const loc = results[0].geometry.location;
        lat = loc.lat();
        lng = loc.lng();
        initialize(lat, lng);
      }
    });
  } else if (urlParams.has("lat") && urlParams.has("lng")) {
    lat = Number(urlParams.get("lat"));
    lng = Number(urlParams.get("lng"));
    initialize(lat, lng);
  } else {
    lat = Number(window.localStorage.getItem("lat"));
    lng = Number(window.localStorage.getItem("lng"));
    initialize(lat, lng);
  }
  window.localStorage.setItem("lat", lat);
  window.localStorage.setItem("lng", lng);
  if (urlParams.has("title")) {
    const title = urlParams.get("title");
    window.localStorage.setItem("title", title);
    document.getElementById("title-text").innerHTML = title;
  } else {
    document.getElementById("title-text").innerHTML =
      window.localStorage.getItem("title");
  }
  window.history.pushState(
    "",
    "Title",
    "/" +
      window.location.href
        .substring(window.location.href.lastIndexOf("/") + 1)
        .split("?")[0]
  );
  // View swap behavior
  document.getElementById("view-swap").addEventListener("click", () => {
    const mainView = document.querySelector(".main-view");
    const corner = document.querySelector(".corner");
    if (
      document.querySelector(".corner .expand").classList.contains("hidden")
    ) {
      document.querySelector(".main-view .expand").classList.add("hidden");
      document.querySelector(".main-view .minimize").classList.remove("hidden");
    } else {
      document.querySelector(".main-view .expand").classList.remove("hidden");
      document.querySelector(".main-view .minimize").classList.add("hidden");
    }
    const cornerClasses = corner.className;
    const mainClasses = mainView.className;
    corner.className = mainClasses;
    mainView.className = cornerClasses;
    moveControls();
  });

  // Pin-to-corner behavior
  document.querySelectorAll(".anchor").forEach((anchor) => {
    anchor.addEventListener("click", () => {
      const corners = ["top", "left", "right", "bottom"];
      let classlist = [];
      const corner = document.querySelector(".corner");
      if (corner) {
        corner.classList.forEach((cornerClass) => {
          if (!corners.includes(cornerClass)) {
            classlist.push(cornerClass);
          }
        });
      }
      anchor.classList.forEach(function (anchorClass) {
        if (corners.includes(anchorClass)) {
          classlist.push(anchorClass);
        }
      });
      document.querySelectorAll(".corner").forEach((corner) => {
        corner.className = classlist.join(" ");
      });
      document.querySelectorAll(".anchor").forEach((anch) => {
        anch.classList.remove("hidden");
      });
      anchor.classList.add("hidden");
      const expandedCorner = document.querySelector(".corner .expand");
      const minimizeCorner = document.querySelector(".corner .minimize");
      if (expandedCorner.classList.contains("hidden")) {
        expandedCorner.click();
      } else {
        minimizeCorner.click();
      }
      moveControls();
    });
  });

  // Minimize pinned view
  document.querySelectorAll(".minimize").forEach((minimize) => {
    minimize.addEventListener("click", () => {
      const view = minimize.parentElement.classList.contains("main-view")
        ? ".main-view"
        : ".corner";
      document.querySelectorAll(".map-sizer").forEach((sizer) => {
        sizer.classList.add("hidden");
      });
      document.querySelectorAll(".google-view").forEach((googleView) => {
        googleView.classList.remove("full");
        googleView.classList.remove("shrunk");
      });
      document.querySelector(view).classList.add("shrunk");
      document.querySelector(`.google-view:not(${view})`).classList.add("full");
      document.querySelector(`${view} .expand`).classList.remove("hidden");
    });
  });

  // Expand pinned view
  document.querySelectorAll(".expand").forEach((expand) => {
    expand.addEventListener("click", () => {
      document.querySelectorAll(".map-sizer").forEach((sizer) => {
        sizer.classList.add("hidden");
      });
      document.querySelectorAll(".google-view").forEach((googleView) => {
        googleView.classList.remove("full");
        googleView.classList.remove("shrunk");
      });
      document.querySelectorAll(".minimize").forEach((minimize) => {
        minimize.classList.remove("hidden");
      });
    });
  });
};

window.getLocation = getLocation;

const moveControls = () => {
  const corner = document.querySelector(".corner");
  let mapTypeControlOpts, streetViewControlOpts;
  if (corner.id == "map-div") {
    if (corner.classList.contains("left")) {
      mapTypeControlOpts = {
        position: google.maps.ControlPosition.LEFT_TOP,
      };
      streetViewControlOpts = {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      };
      if (corner.classList.contains("top")) {
        addressControlOpts = {
          position: google.maps.ControlPosition.TOP_RIGHT,
        };
        zoomControlOpts = {
          position: google.maps.ControlPosition.RIGHT_BOTTOM,
        };
      } else {
        addressControlOpts = {
          position: google.maps.ControlPosition.TOP_LEFT,
        };
        zoomControlOpts = {
          position: google.maps.ControlPosition.RIGHT_BOTTOM,
        };
      }
    } else {
      mapTypeControlOpts = {
        position: google.maps.ControlPosition.TOP_RIGHT,
      };
      streetViewControlOpts = {
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
      };
      if (corner.classList.contains("top")) {
        addressControlOpts = {
          position: google.maps.ControlPosition.TOP_LEFT,
        };
        zoomControlOpts = {
          position: google.maps.ControlPosition.RIGHT_BOTTOM,
        };
      } else {
        addressControlOpts = {
          position: google.maps.ControlPosition.TOP_LEFT,
        };
        zoomControlOpts = {
          position: google.maps.ControlPosition.LEFT_BOTTOM,
        };
      }
    }
  } else {
    if (corner.classList.contains("left")) {
      addressControlOpts = {
        position: google.maps.ControlPosition.TOP_LEFT,
      };
      zoomControlOpts = {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      };
      mapTypeControlOpts = {
        position: google.maps.ControlPosition.TOP_RIGHT,
      };
      streetViewControlOpts = {
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
      };
    } else {
      addressControlOpts = {
        position: google.maps.ControlPosition.TOP_RIGHT,
      };
      zoomControlOpts = {
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
      };
      mapTypeControlOpts = {
        position: google.maps.ControlPosition.TOP_LEFT,
      };
      streetViewControlOpts = {
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      };
    }
  }
  map.setOptions({
    mapTypeControlOptions: mapTypeControlOpts,
    streetViewControlOptions: streetViewControlOpts,
  });
  panorama.setOptions({
    zoomControlOptions: zoomControlOpts,
    addressControlOptions: addressControlOpts,
  });
};

const initialize = (lat, lng) => {
  myPlace = {
    lat: lat,
    lng: lng,
  };

  map = new google.maps.Map(document.getElementById("map"), {
    disableDefaultUI: true,
    streetViewControl: true,
    mapTypeControl: true,
    controlSize: 28,
    center: myPlace,
    zoom: 18,
  });

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: myPlace,
      fullscreenControl: false,
      imageDateControl: true,
    }
  );
  const checkPano = () => {
    if (panorama.getLocation()) {
      document.getElementById("pano").classList.remove("empty");
    } else {
      document.getElementById("pano").classList.add("empty");
    }
  };
  checkPano();
  panorama.addListener("position_changed", checkPano);

  const marker = new google.maps.Marker({
    position: myPlace,
    map: map,
    icon: {
      url: pinURL,
      scaledSize: new google.maps.Size(24, 32, "px", "px"),
    },
  });

  map.setStreetView(panorama);

  const sv = new google.maps.StreetViewService();

  sv.getPanorama(
    {
      location: myPlace,
      radius: 50,
    },
    processSVData
  );
  moveControls();
};

const processSVData = (data, status) => {
  if (status === google.maps.StreetViewStatus.OK) {
    const markerPano = new google.maps.Marker({
      position: myPlace,
      map: panorama,
      icon: {
        url: pinURL,
        scaledSize: new google.maps.Size(90, 120, "px", "px"),
      },
    });
    const heading = google.maps.geometry.spherical.computeHeading(
      data.location.latLng,
      markerPano.getPosition()
    );
    panorama.setPov({
      heading: heading,
      pitch: 0,
    });
  }
};