"use strict";

import $ from "jquery";
import Events from "../_events";

import "../../scss/_components/_ui.map.scss";

import CONSTS from "js/_consts";

const MapAPI = (($) => {
  // Constants
  const NAME = "jsMapAPI";
  const DATA_KEY = NAME;
  const $BODY = $("body");

  const MAP_DRIVER = CONSTS["MAP_DRIVER"];
  const W = window;

  class MapAPI {
    // Constructor
    constructor(el) {
      const ui = this;
      const Drv = new MAP_DRIVER();

      ui.$el = $(el);

      const $el = ui.$el;
      const config = $el.data();

      config["center"] = [
        config["lng"] ? config["lng"] : $BODY.data("default-lng"),
        config["lat"] ? config["lat"] : $BODY.data("default-lat"),
      ];

      config["style"] = config["style"]
        ? jQuery.parseJSON(config["style"])
        : null;

      config["font-family"] = $BODY.css("font-family");

      if (!config["icon"]) {
        config["icon"] = '<i class="fas fa-map-marker-alt"></i>';
      }

      console.log(`${NAME}: init ${Drv.getName()}...`);
      Drv.init($el, config);
      ui.drv = Drv;

      $el.on(Events.MAPAPILOADED, (e) => {
        ui.map = Drv.getMap();

        if (config["geojson"]) {
          console.log(`${NAME}: setting up geocode data`);
          Drv.addGeoJson(config);
        } else if (config["address"]) {
          console.log(config["address"]);
          console.log(`${NAME}: setting up address marker`);
          Drv.geocode(config["address"], (results) => {
            console.log(results);

            const lat = results[0].geometry.location.lat();
            const lng = results[0].geometry.location.lng();

            console.log(
              `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
            );

            Drv.addMarker([lng, lat], config);
            ui.map.setCenter({ lat, lng });
          });
        } else if (config["lat"] && config["lng"]) {
          const lat = config["lat"];
          const lng = config["lng"];

          console.log(
            `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
          );

          Drv.addMarker([lng, lat], config);
        }

        $el.data(DATA_KEY, ui);
        $el.addClass(`${NAME}-active`);

        $el.trigger(Events.MAPLOADED);
        console.log(`${NAME}: Map is loaded`);
      });
    }

    // Public methods
    getMap() {
      return ui.map;
    }

    dispose() {
      const ui = this;

      ui.$el = null;
      $.removeData(ui.$el[0], DATA_KEY);

      ui.$el.removeClass(`${NAME}-active`);
    }

    static _jQueryInterface() {
      if (typeof W.localStorage !== "undefined") {
        return this.each(() => {
          // attach functionality to el
          const $el = $(this);
          let data = $el.data(DATA_KEY);

          if (!data) {
            data = new MapAPI(this);
            $el.data(DATA_KEY, data);
          }
        });
      }
    }
  }

  // jQuery interface
  $.fn[NAME] = MapAPI._jQueryInterface;
  $.fn[NAME].Constructor = MapAPI;
  $.fn[NAME].noConflict = () => {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return MapAPI._jQueryInterface;
  };

  // auto-apply
  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
    $(".mapAPI-map-container").jsMapAPI();
  });

  return MapAPI;
})($);

export default MapAPI;