<template>
  <div :key='isAuthenticated'>
    <v-container fluid grid-list-md class='app-fade-in'>
      <v-layout row wrap>
        <v-flex xs12>
          <v-text-field
            v-model='origin'
            :label="$t('origins.origin')"
            :placeholder="$t('origins.geolocation')"
          >
            <template #append-outer>
              <v-tooltip top>
                <template #activator='{ on }'>
                  <v-icon v-on='on' @click='fetchAddress()'
                  >mdi-crosshairs-gps
                  </v-icon>
                </template>
                <span v-text="$t('origins.fetchAddress')" />
              </v-tooltip>
            </template>
            <template #prepend>
              <v-tooltip top>
                <template #activator='{ on }'>
                  <v-icon
                    :disabled='!origin'
                    v-on='on'
                    @click='saveOrigin(origin)'
                  >mdi-bookmark-plus-outline
                  </v-icon>
                </template>
                <span v-text="$t('origins.save')" />
              </v-tooltip>
            </template>
          </v-text-field>
        </v-flex>
      </v-layout>
      <v-layout v-for='o in origins' :key='o' row wrap>
        <v-flex xs12>
          <v-tooltip top>
            <template #activator='{ on }'>
              <v-icon v-on='on' @click='removeOrigin(o)'
              >mdi-delete-outline
              </v-icon>
            </template>
            <span v-text="$t('origins.remove')" />
          </v-tooltip>
          <span>{{ o }}</span>
        </v-flex>
      </v-layout>
    </v-container>
    <v-snackbar
      v-model='snackbar.active'
      :color='snackbar.color'
      :timeout='5000'
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, ref } from 'vue'
import { useAuth } from '~/plugins/auth'
import { useTranslation } from '~/plugins/i18n'
import {
  useFetchAddressLazyQuery,
  useFindOriginsQuery,
  useRemoveOriginMutation,
  useSaveOriginMutation
} from '~/graphql/generated/operations'
import { useState } from '~/store'

export default defineComponent({
  name: 'OriginsPage',
  setup() {
    const state = useState()
    const { t } = useTranslation()
    state.setTitle(t('app.links.origins'))
    const { isAuthenticated } = useAuth()
    const { result, loading, refetch } = useFindOriginsQuery()
    const origins = computed(() => result.value?.origins ?? [])
    const snackbar = ref({ active: false, color: 'success', text: '' })
    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
    const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
    const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
    const origin = ref('')
    const fetchAddressFn = () => {
      if (window.navigator) {
        window.navigator.geolocation.getCurrentPosition((pos) => {
          load()
          doFetchAddress({
            latlng: `${pos.coords.latitude},${pos.coords.longitude}`
          })?.then((res) => {
            origin.value = res.data.address
          })
        })
      }
    }
    const saveOriginFn = (o: string) =>
      doSaveOrigin({ origin: o }).then(() => {
        refetch()
        origin.value = ''
      })
    const removeOriginFn = (o: string) =>
      doRemoveOrigin({ origin: o }).then(() => refetch())
    return {
      isAuthenticated,
      loading,
      origins,
      snackbar,
      origin,
      saveOrigin: saveOriginFn,
      removeOrigin: removeOriginFn,
      fetchAddress: fetchAddressFn
    }
  }
})
</script>
