import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";

Vue.component("l-map", window.Vue2Leaflet.LMap);
Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
Vue.component("l-marker", window.Vue2Leaflet.LMarker);
Vue.component("l-icon", window.Vue2Leaflet.LIcon);
Vue.component("l-popup", window.Vue2Leaflet.LPopup);
Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
Vue.component("l-polyline", window.Vue2Leaflet.LPolyline);
Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
Vue.component("multiselect", window.VueMultiselect.default);
Vue.use(window.VueTextareaAutosize);

const app = new Vue({
  el: "#app",
  data: {
    journey_edit:
      ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
    journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),

    query: { hotel: [], flight: [], nominatim: [] },
    querying: { hotel: false, flight: false, place: false, food: false },
    impexp: "",
    lang: {
      format: "ddd D MMM",
      formatLocale: {
        firstDayOfWeek: 1,
      },
      monthBeforeYear: true,
    },
    polyline: {
      latlngs: [[47.334852, -1.509485], [47.342596, -1.328731], [47.241487, -1.190568], [47.234787, -1.358337]],
      color: 'green'
    }
  },
  methods: {
    start_journey: () => window.location.href = "/" + this.journey.id,

    search_nominatim: function (txt, f) {
      if (txt == "") {
        this.query.nominatim = [];
        return Promise.resolve([]);
      }
      return api.query_nominatim(txt, f).catch((err) => []).then((results) => {
        results.forEach((r) => {
          r.latlon = [parseFloat(r.lat), parseFloat(r.lon)];
          r.sname = r.display_name.split(",")[0];
        });
        this.query.nominatim = results;
      });
    },
    search_flight: function (txt) {
      if (txt == "") return;
      this.querying.flight = true;
      api.query_flight(txt.replace(" ", "")).then((results) => {
        if (results.results == "") {
          this.query.flight = [];
          this.querying.flight = false;
          return;
        }
        this.query.flight = results.results;
        this.querying.flight = false;
      });
    },
    generate_icon: function (item, fcolor) {
      return L.AwesomeMarkers.icon({
        icon: api.icon_type(item) || "star",
        prefix: "fa",
        markerColor: fcolor || item.color || "blue",
      }).createIcon().outerHTML;
    },

    save_data: function () {
      this.impexp = JSON.stringify(this.journey.data).toEncoded();
      api.save(this.journey.id, this.journey.data);
    },
    import_data: function () {
      this.journey.data = Object.assign(
        {},
        JSON.parse(this.impexp.toDecoded()),
      );
      this.journey.data.main.forEach((e) => {
        if (e.date_range) {
          e.date_range[0] = new Date(e.date_range[0]);
          e.date_range[1] = new Date(e.date_range[1]);
        }
      });
    },
    export_data: function () {
      this.impexp = JSON.stringify(this.journey.data).toEncoded();
    },
    filter_selected: function (list, step) {
      return list.filter((e) =>
        step ? e.step == this.journey.sel_day : e.step >= 0,
      );
    },
    filter_unselected: function (list) {
      return list.filter((e) => e.step == undefined || e.step < 0);
    },
    remove_item: function (list, idx) {
      list[idx].step = -1;
      list.splice(idx, 1);
    },
    log: function (e) {
      console.log(e);
    },

    keyboardEvent(e) {
      if (e.which === 13) {
      }
    },
  },
  created: function () {
    window.addEventListener("keydown", (e) => {
      switch (e.key) {
        case "ArrowLeft":
          this.journey.day_prev();
          break;
        case "ArrowRight":
          this.journey.day_next();
          break;
        default:
          console.log(e.key);
      }
    });

    api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));

    this.debounceSave = api.throttle(this.save_data, 500);
    this.debounceSearch = {
      hotel: api.throttle((q) => {
        this.querying.hotel = true;
        this.search_nominatim(
          q,
          (r) =>
            r.type == "hotel" || r.type == "hostel" || r.type == "guest_house",
        ).then((r) => {
          this.querying.hotel = false;
        });
      }, 500),
      restaurants: api.throttle((q) => {
        this.querying.food = true;
        this.search_nominatim(q, (r) => api.is_restauration_type(r)).then(
          (r) => {
            this.querying.food = false;
          },
        );
      }, 500),
      places: api.throttle((q) => {
        this.querying.place = true;
        this.search_nominatim(q, (r) => api.is_attraction_type(r)).then((r) => {
          this.querying.place = false;
        });
      }, 500),
      other: api.throttle((q) => {
        this.querying.any = true;
        this.search_nominatim(q, (r) => true).then((r) => {
          this.querying.any = false;
        });
      }, 500),
      flight: api.throttle((q) => this.search_flight(q), 500),
    };
  },
  watch: {
    journey: {
      handler: function (ndata, odata) {
        this.debounceSave();
      },
      deep: true,
    },
  },
});