import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";
import { journey_add_place, journey_del_place } from "./helper/journey";
import { search_nominatim, search_flight } from "./helper/api";
import { focus_day, focus_leg, nav_mouseleave, nav_mousemove } from "./helper/nav";
import { set_search_set_results } from "./helper/api";

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);

const app = new Vue({
  el: "#app",
  data: {
    edit_active: ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
    journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
    map_override: { active: false, elements: [] },
    query: {
      type: "", query: "", res: [], load: false, sub: false, note: false, drawer: false, addmarker: false,
    },
    useDay: false,
    toast: {
      show: false,
      title: '',
      desc: '',
      special: '',
      acceptText: '',
      cancelText: '',
      func: () => { },
    },
    lang: {
      format: "ddd D MMM",
      formatLocale: {
        firstDayOfWeek: 1,
      },
      monthBeforeYear: true,
    },
  },
  methods: {
    start_journey: function () { window.location.href = "/" + this.journey.id },

    compute_bb: function () {
      if (!this.$refs.map) return undefined
      const bounds = this.$refs.map.mapObject.getBounds();
      return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
      [bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
    },
    generate_rotation: function (index, list) {
      if (index < 0 || index >= list.length) return 0;
      const c0 = list[(index == 0) ? index : (index - 1)]
      const c1 = list[(index == list.length - 1) ? index : (index + 1)]
      const brng = Math.atan2(c1[1] - c0[1], c1[0] - c0[0]);
      return `rotate:${brng - Math.PI / 2}rad`;

    },
    generate_marker: function (item, fcolor) {
      return `
			<div style="position: absolute;top: -30px;left: -6px;">
  			<i class=" fa fa-${api.icon_type(item) || "star"}  fa-lg icon-white" style="position: absolute;text-align:center; width:24px;height:24px; line-height:1.5em"></i>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">
              <circle cx="12" cy="12" r="12" fill="${fcolor || item.color || "blue"}"/>
              <polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
    },
    generate_icon: function (item, fcolor = "", styling = "", classes = "") {
      return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x ${classes}"  style="${styling}; color:${fcolor || "white"}; text-align:center; align-content:center;"></i>`;
    },

    import_data: function (v) {
      this.journey.data = Object.assign(
        {},
        JSON.parse(v.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]);
        }
      });
    },

    toast_reset: function () {
      this.toast.show = false;
      this.toast.title = '';
      this.toast.desc = ''
      this.toast.special = '';
      this.toast.acceptText = ''
      this.toast.cancelText = ''
      this.toast.func = () => { }
    },

    toast_impexp: function (is_import) {
      this.toast.show = true;
      this.toast.title = is_import ? 'Import' : 'Export';
      this.toast.desc = ''
      this.toast.special = JSON.stringify(this.journey.data).toEncoded();
      this.toast.acceptText = is_import ? 'load' : ''
      this.toast.cancelText = 'cancel'
      this.toast.func = () => { this.import_data(this.toast.special); this.toast_reset(); }
    },

    search_set_results(r) {
      this.query.load = false;
      this.query.res = r;
      return r
    },
    search_set_clear(keep_drawer) {
      this.query.res = [];
      this.query.note = false;
      this.query.type = null;
      this.query.addmarker = false;
      this.query.sub = false;
      this.query.drawer = keep_drawer;
      setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
    },
    search_set_active: function (is_notes, tpe) {
      this.query.drawer = true;
      this.query.note = is_notes;
      this.query.type = !is_notes ? tpe : null;
      this.query.load = !is_notes;
      setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
    },

    drawer_hover_item: function (item) {
      if (item) {
        this.map_override.active = true
        if (item.type == 'flight') {
          this.map_override.elements = [[item.from_geo.lat, item.from_geo.lon], [item.to_geo.lat, item.to_geo.lon]]
        } else {
          this.map_override.elements = [[item.lat, item.lon]]
        }
      } else {
        this.map_override.active = false
      }
    },

    drawer_click_item: function (item) {
      this.search_set_clear(item ? true : false);
      this.drawer_hover_item();
      if (item) {
        item.step = -1;
        journey_add_place(this.journey, this.query.type, item)
      }
    },

    search_active: function (_e) {
      const tpe = this.query.type;
      const query = this.query.query;
      switch (tpe) {
        case 'hotel':
        case 'restaurant': ;
        case 'place':
        case 'other':
          return search_nominatim(tpe, query, this.compute_bb(), this.journey.leg_get())

        case 'flight':
          return search_flight(tpe, query, this.journey.leg_get());
      }
    },

    search_enable: function (f) {
      const is_notes = f == 'notes';
      this.search_set_active(is_notes, f)
      setTimeout(() => document.getElementById(is_notes ? 'query_note' : 'query_input').focus(), 500);
      if (!is_notes) this.search_active()
    },

    refreshTextAreaHeight: function (e) {
      e.target.style['height'] = 'auto';
      e.target.style['height'] = e.target.scrollHeight + 'px';
      e.target.style['max-height'] = "100%";
    },

    onMapClick(e) {
      if (this.query.addmarker) {
        const newMarker = {
          latlon: [e.latlng.lat, e.latlng.lng],
          sname: this.query.query,
          type: this.query.type,
        };
        this.drawer_click_item(newMarker)
      }
    },
  },
  created: function () {
    set_search_set_results(this.search_set_results);
    this.nav_mouseleave = nav_mouseleave;
    this.nav_mousemove = nav_mousemove;
    this.focus_day = focus_day;
    this.focus_leg = focus_leg;
    this.place_delete = (tpe, idx) => journey_del_place(this.journey, tpe, idx);

    this.save_data = api.throttle(() => {
      api.save(this.journey.id, this.journey.data);
    }, 1000);

    this.pressed_prev = api.throttle(() => {
      if (this.useDay) this.journey.day_prev();
      else this.journey.leg_prev();
    }, 250)
    this.pressed_next = api.throttle(() => {
      if (this.useDay) this.journey.day_next();
      else this.journey.leg_next();
    }, 250)

    window.addEventListener("keydown", (e) => {
      switch (e.key) {
        case "ArrowLeft": return this.pressed_prev()
        case "ArrowRight": return this.pressed_next()
        default: return console.log(e.key);
      }
    });

    api.load(this.journey.id).then((r) => {
      app.journey.data = migrator(r)
    });
  },
  watch: {
    journey: {
      handler: function (ndata, odata) {
        if (this.edit_active) this.save_data();
      },
      deep: true,
    },
  },
});