<template>
  <div v-if="coords" class="delivery">
    <div class="delivery__sidebar">
      <UInput v-model="searchTerm" size="xl" class="w-full" placeholder="pvz" />

      <div class="delivery__items">
        <div
          v-for="point in filteredPvz?.points"
          :key="point.id"
          class="pickup-point-item"
          @click="centerMap(point)"
        >
          <h3>Yandex</h3>
          {{ `${point?.address?.street} ${point?.address?.house}` }}
          <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
        </div>
      </div>
    </div>

    <PvzMap ref="mapRef" :pickup-points="yandexPvz?.points" />
  </div>
</template>

<script setup lang="ts">
import { useGeolocation } from '@vueuse/core'
import { onMounted, ref } from 'vue'
import PvzMap from '~/components/PvzMap.vue'

const { coords } = useGeolocation()
const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
const yandexPvz = ref('')
const searchTerm = ref('')

const waitForCoords = () =>
  new Promise<void>((resolve) => {
    const stop = watch(coords, (newCoords) => {
      if (newCoords.latitude && newCoords.longitude) {
        stop()
        resolve()
      }
    })
  })

onMounted(async () => {
  await waitForCoords()

  // обратное геокодирование (т.е. получаение города из координат)
  const response = await fetch(
    `https://nominatim.openstreetmap.org/reverse?lat=${coords.value.latitude}&lon=${coords.value.longitude}&format=json&accept-language=ru`,
  )
  const openstreetmap = await response.json()

  // получение geo_id из названию города
  const { data: yandexLocation } = await useFetch('/api/yandex_location', {
    method: 'POST',
    body: {
      location: openstreetmap?.address?.city,
    },
  })

  // получения пунктов выдачи города из geo_id
  const { data: yandexPvzApi } = await useFetch('/api/yandex_pvz', {
    method: 'POST',
    body: {
      geo_id: yandexLocation?.value?.variants[0]?.geo_id,
    },
  })

  yandexPvz.value = yandexPvzApi.value
})

// TODO сделать отдельный компонент UISearch
const filteredPvz = computed(() => {
  if (!searchTerm.value && searchTerm.value === '')
    return yandexPvz.value

  const result = yandexPvz?.value?.points?.filter(value => value?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()))
  return {
    points: [...result],
  }
})

const centerMap = (point: any) => {
  mapRef.value?.centerMap([point?.position?.longitude, point?.position?.latitude])
}

definePageMeta({
  layout: 'checkout',
})
</script>

<style lang="scss">
.delivery {
  display: flex;
  flex-direction: row;

  &__sidebar {
    width: 410px;
    padding: 24px;
  }

  &__items {
    overflow-y: auto;
    flex-shrink: 0;
    height: calc(100dvh - 54px - 40px - 24px);
  }
}

.pickup-point-item {
  position: relative;
  width: 400px;
  height: 100px;
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;

  &__action {
    position: absolute;
    right: 20px;
    top: 40px;
  }
}
</style>
