<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <label for=""> <strong>Directions From:</strong></label>
        <br />
        <label v-if="startAddress === null" class="uniSelectLabel" for="weekInfoRegionSelect"
          >SELECT</label
        >
        <select v-model="startAddress" class="uniSelect form-control mb-3" @change="calcRoute()">
          <optgroup label="Cities">
            <option value="-29.087217,26.154898,Bloemfontein">Bloemfontein</option>
            <option value="-33.918861, 18.423300,Cape Town">Cape Town</option>
            <option value="-29.883333, 31.049999,Durban">Durban</option>
            <option value="-33.0153, 27.9116,East London">East London</option>
            <option value="-33.977074, 22.457581,George">George</option>
            <option value="-26.195246, 28.034088,Johannesburg">Johannesburg</option>
            <option value="-25.4745, 30.9703,Nelspruit">Nelspruit</option>
            <option value="-23.9045, 29.4689,Polokwane">Polokwane</option>
            <option value="-33.9180, 25.5701,Port Elizabeth">Port Elizabeth</option>
            <option value="-25.731340, 28.218370,Pretoria">Pretoria</option>
            <option value="-28.44776, 21.25612,Upington">Upington</option>
          </optgroup>

          <optgroup label="Airports">
            <option value="-26.13916667, 28.24611111,OR Tambo Airport">OR Tambo</option>
            <option value="-29.61444444, 31.11638889,King Shaka Airport">King Shaka</option>
            <option value="-33.9843, 25.6170,Port Elizabeth Airport">Port Elizabeth</option>
            <option value="-33.96944444, 18.59722222,Cape Town Airport">Cape Town</option>
          </optgroup>
        </select>
        <GmapMap
          :center="{ lat: -26.195246, lng: 28.034088 }"
          :zoom="7"
          map-type-id="terrain"
          style="width: 100%; height: 500px"
          ref="map"
        >
        </GmapMap>
        <div style="max-height:500px; overflow:auto">
          <table id="directionTable" class="table table-sm">
            <tr>
              <td colspan="4">{{ overallRoute }}</td>
            </tr>
            <tr v-for="(direction, i) in directionSteps" :key="i">
              <td></td>
              <td>{{ i + 1 + "." }}</td>
              <td style="max-width:200px">
                <p v-html="direction.instructions" style="font-size:12px"></p>
              </td>
              <td>
                <p style="font-size:12px">{{ direction.distance.text }}</p>
              </td>
            </tr>
          </table>
        </div>

        <button
          style="float:right"
          v-if="fromSelected"
          class="btn-solid-blue"
          @click="saveDirections()"
        >
          Save
        </button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { gmapApi } from "vue2-google-maps";
import jsPDF from "jspdf";
import "jspdf-autotable";
export default {
  computed: {
    google: gmapApi,
    directionsRenderer() {
      return new google.maps.DirectionsRenderer();
    }
  },
  props: {
    resortCoords: {},
    resortName: ""
  },
  data() {
    return {
      directionService: {},
      startAddress: null,
      directionSteps: [],
      overallRoute: "",
      fromSelected: false,
      selectedFromName: ""
    };
  },
  methods: {
    saveDirections() {
      const doc = new jsPDF();

      doc.setDrawColor(186, 186, 186);
      doc.line(15, 62, 195, 62);
      doc.setFontSize(20);
      doc.text(115, 25, "Directions:");
      doc.setFontSize(9);
      doc.text(115, 30, "From " + this.selectedFromName + " to " + this.resortName);
      doc.addImage("/img/logos/UVProp.png", "PNG", 15, 10, 75, 25);
      doc.setFontSize(12);
      doc.autoTable({
        html: "#directionTable",
        startY: 47,
        headStyles: {
          fillColor: [255, 255, 255],
          textColor: [0, 0, 0]
        }
      });

      doc.setFontSize(10);
      const pages = doc.internal.getNumberOfPages();
      const pageWidth = doc.internal.pageSize.width;
      const pageHeight = doc.internal.pageSize.height;
      for (let j = 1; j < pages + 1; j++) {
        let horizontalPos = pageWidth / 2;
        let verticalPos = pageHeight - 10;
        doc.setPage(j);
        doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, {
          align: "center"
        });
      }
      doc.save("directions.pdf");
    },
    calcRoute() {
      var resortCoords = this.resortCoords.split(",");
      var resortLatLng = new google.maps.LatLng({
        lat: parseFloat(resortCoords[1]),
        lng: parseFloat(resortCoords[0])
      });

      var startCoords = this.startAddress.split(",");
      this.selectedFromName = startCoords[2];
      var startLatLng = new google.maps.LatLng({
        lat: parseFloat(startCoords[0]),
        lng: parseFloat(startCoords[1])
      });

      var LatLng = new google.maps.LatLng({
        lat: -29.087217,
        lng: 26.154898
      });

      this.directionsService = new google.maps.DirectionsService();
      //   var map = this.$refs.map.$mapObject;
      //   this.directionsRenderer.setMap(map);
      //   var start = document.getElementById("start").value;
      var end = "joplin, mo";
      var request = {
        origin: startLatLng,
        destination: resortLatLng,
        travelMode: "DRIVING"
      };

      this.directionsService.route(request, (result, status) => {
        if (status == "OK") {
          this.directionSteps = result.routes[0].legs[0].steps;
          console.log(result);
          this.overallRoute =
            result.routes[0].legs[0].distance.text +
            ". About " +
            result.routes[0].legs[0].duration.text;

          this.directionsRenderer.setMap(this.$refs.map.$mapObject);

          this.directionsRenderer.setDirections(result);
        }
      });
      this.fromSelected = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
