<template>
  <div class="q-pa-sm">
    <div class="q-gutter-sm">
      <div class="row q-col-gutter-sm q-mb-sm items-center">
        <div class="col">
          <q-select
            v-model="localAddressObj"
            label="Indirizzo"
            use-input
            input-debounce="300"
            :options="suggestions"
            @filter="getAddressSuggestions"
            filled
            dense
            hide-dropdown-icon
            clearable
          />
        </div>
        <div class="col-auto">
          <q-btn @click="searchAddress" label="Cerca" color="primary" />
        </div>
      </div>
      <div class="row q-col-gutter-sm q-mb-sm items-center no-wrap">
        <q-col class="q-col-auto" style="width: 120px">
          <q-input
            v-model="localCoordinates.lat"
            label="Latitudine:"
            filled
            :label-color="modificato ? 'negative' : 'primary'"
            dense
          />
        </q-col>
        <q-col class="q-col-auto" style="width: 120px">
          <q-input
            v-model="localCoordinates.lng"
            label="Longitudine:"
            filled
            :label-color="modificato ? 'negative' : 'primary'"
            dense
          />
        </q-col>
        <q-col class="q-col-auto" style="width: 60px">
          <q-btn
            @click="getCurrentLocation"
            label=""
            color="primary"
            icon="gps_fixed"
          />
        </q-col>
        <q-col class="q-col-auto" style="width: 60px">
          <q-btn
            @click="mostraMappa = !mostraMappa"
            :color="mostraMappa ? 'negative' : 'positive'"
            class="q-ma-sm"
            icon="fas fa-map"
          />
        </q-col>
      </div>

      <div v-if="modificato" class="row justify-center q-ma-sm">
        <q-btn
          @click="salvaCoordinate"
          color="primary"
          label="Salva"
          :disable="!modificato"
          class="q-ma-sm"
        />
        <q-btn
          @click="annullaSalvataggio"
          label="Annulla"
          class="q-ma-sm"
          :disable="!modificato"
        />
      </div>
    </div>

    <div
      id="map"
      ref="mapContainer"
      v-show="mostraMappa"
      :style="`height:${myheight}px; width:99%`"
    ></div>
  </div>
</template>
<script lang="ts" src="./CMapEditAddressByCoord.ts">
</script>

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