<script setup lang="ts">
const longitude = defineModel<string>('longitude');
const latitude = defineModel<string>('latitude');

function getLocation() {
  navigator.geolocation.getCurrentPosition((position) => {
    longitude.value = position.coords.longitude.toString();
    latitude.value = position.coords.latitude.toString();
  });
}

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="col-12">
    <div class="col-12 q-pb-sm text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-map-legend"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`${title}`) }}
    </div>

    <div class="col-12 bordered rounded column">
      <!-- <div class="q-pl-md q-py-sm app-text-muted bordered-b">location</div> -->

      <div v-if="!!latitude" class="col flex flex-center">
        <iframe
          :src="`https://maps.google.com/maps?q=${latitude}&z=15&output=embed`"
          width="100%"
          frameborder="0"
          style="border: 0"
        ></iframe>
      </div>

      <div
        v-else
        class="col-12 flex flex-center"
        style="
          height: 150px;
          background-image: url(/map.png);
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
        "
      >
        <!-- <q-btn
          :text-color="$q.dark.isActive ? 'black' : 'white'"
          style="
            background: var(--blue-5);
            color: var(--blue-0);
            font-size: 12px;
            width: 150px;
          "
          unelevated
          rounded
          :label="$t('branch.form.shareLocation')"
          @click="getLocation()"
          id="btn-get-location"
        /> -->
      </div>
    </div>
    <div class="row full-width q-pt-sm">
      <q-input
        v-model="latitude"
        :readonly="readonly"
        :outlined="outlined"
        :dense="dense"
        :label="$t('branch.form.locationCoordinate')"
        class="col q-mr-xs"
      />
      <!-- <q-input
        v-model="longitude"
        :readonly="readonly"
        :outlined="outlined"
        :dense="dense"
        :label="$t('branch.form.longitude')"
        class="col q-ml-xs"
      /> -->
    </div>
  </div>
</template>
