<script setup>
import Button from "primevue/button";
import { ref } from "vue";
import InputText from "primevue/inputtext";
import Divider from "primevue/divider";
import { encodeLocation, decodeLocation } from "geowords";
import Map from './components/map/map.vue'
const currentLoc = ref("");
const currentLocWords = ref("");
const decryptedLoc = ref({lat:0,lon:0});
const decryptedLocWords = ref("");

function createWords() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      currentLoc.value = {
        lat: position.coords.latitude,
        lon: position.coords.longitude,
      };
      currentLocWords.value = encodeLocation(currentLoc.value, 4);
    });
  } else {
    window.alert("Geolocation is not supported by this browser.");
  }
}

function changeWordsHandler(e) {
  decryptedLocWords.value = e.target.value;
}

function decodeWords() {
  decryptedLoc.value = decodeLocation(decryptedLocWords.value.split(" "));
  window.alert(decryptedLoc.value.lat + "  " + decryptedLoc.value.lon);
}


</script>

<template>
  <div class="p-4">
    <div class="surface-card p-4 shadow-2 border-round">
      <div class="border-2 border-dashed surface-border border-round mb-3 p-4">
        <img src="logo.png" class="center margin-auto w-full lg:w-auto" />
        <h3>Find The Treasure</h3>
      </div>
      <div class="border-2 border-dashed surface-border border-round p-4 flex justify-content-center align-items-center flex-column" style="min-height: 20rem">
        <h4>Convert your current map position to simple words or decrypt them to secret localisation of hidden treasure</h4>
        <Divider />
        <Button size="large" :onclick="createWords">Convert your localisation</Button>
        <Divider />
        <h3 v-if="currentLoc">Current location data</h3>
        <b>{{ currentLoc }}</b>
        <Divider />
        <h3 v-if="currentLocWords">Magic and secret words</h3>
        <h2 class="words">
          <span v-for="word in currentLocWords"> {{ word + " " }} </span>
        </h2>
        <Divider />
        <h4>Enter secret words to get localisation</h4>
        <InputText type="text" :onchange="changeWordsHandler" />
        <Divider />
        <Button size="large" severity="secondary" :onclick="decodeWords">Get localisation</Button>
        <Map :center="decryptedLoc"></Map>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "primeflex/primeflex.scss";

* {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.map{
  width: 400px;
  height: 400px;
}
.words {
  color: #12c05d;
}
</style>
