<template>
  <div v-if="coords" class="delivery">
    <!--    Desktop -->
    <div v-if="!isMobile" class="delivery__sidebar">
      <DeliveryInfo v-if="isPickupPointSelected" />

      <DeliverySearch v-else :filtered-points="filteredPoints" />
    </div>

    <!--    Mobile -->
    <UDrawer
      v-if="isMobile"
      v-model:open="open"
      fixed
      :ui="{
        content: 'fixed bg-default ring ring-default flex focus:outline-none overflow-hidden',
        container: 'w-full flex flex-col gap-4 p-4 overflow-hidden',
        body: 'flex-1 overflow-y-auto',
      }"
    >
      <template #content>
        <div class="px-4 pb-4">
          <DeliveryInfo v-if="isPickupPointSelected" />
        </div>
      </template>
    </UDrawer>

    <UModal
      v-model:open="openDeliverySearch"
      fullscreen
      :ui="{
        body: 'overflow-hidden',
        container: 'p-0',
        overlay: 'bg-black/50',
        base: 'rounded-none shadow-none',
        header: 'hidden',
      }"
    >
      <template #body>
        <DeliverySearch
          v-if="activeTab === IPvzMapTabs.LIST"
          :filtered-points="filteredPoints"
        />

        <UDrawer
          v-if="isMobile"
          v-model:open="open"
          fixed
          :ui="{
            content: 'fixed bg-default ring ring-default flex focus:outline-none overflow-hidden',
            container: 'w-full flex flex-col gap-4 p-4 overflow-hidden',
            body: 'flex-1 overflow-y-auto',
          }"
        >
          <template #content>
            <div class="px-4 pb-4">
              <DeliveryInfo v-if="isPickupPointSelected" />
            </div>
          </template>
        </UDrawer>
      </template>

      <template #footer>
        <div class="d-flex flex-row w-full justify-between">
          <MapControlFitting v-model="isFitting" />

          <MapControlTabs v-model:active-tab="activeTab" />
        </div>
      </template>
    </UModal>

    <!--    Desktop Mobile -->
    <PvzMap
      v-model="checkoutPickupPoint"
      v-model:active-tab="activeTab"
      v-model:is-fitting="isFitting"
      :pickup-points="filteredPoints"
      @update:model-value="updatePoint()"
      @update:is-fitting="value => isFitting = value"
    />
  </div>
</template>

<script setup lang="ts">
import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
import { IPvzMapTabs } from '#shared/types'
import { useGeolocation, useMediaQuery } from '@vueuse/core'
import { computed, onMounted, ref } from 'vue'
import DeliveryInfo from '~/components/DeliveryInfo.vue'
import DeliverySearch from '~/components/DeliverySearch.vue'
import PvzMap from '~/components/PvzMap.vue'
import { useCheckout } from '~/composables/useCheckout'

const { setCheckoutPickupPoint, isPickupPointSelected, checkoutPickupPoint } = useCheckout()
const { coords } = useGeolocation()
const open = ref(false)
const isMobile = useMediaQuery('(max-width: 1280px)')
const yandexPvz = ref<YandexPvzResponse>()
const searchTerm = ref('')
const activeTab = ref(IPvzMapTabs.MAP)
const isFitting = ref()
const openDeliverySearch = ref(false)

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<YandexPvzResponse>('/api/yandex_pvz', {
    method: 'POST',
    body: {
      geo_id: yandexLocation?.value?.variants[0]?.geo_id,
    },
  })

  yandexPvz.value = yandexPvzApi.value
})

// TODO сделать отдельный компонент UISearch
const filteredPoints = computed<PickupPoint[]>(() => {
  if (!searchTerm.value || searchTerm.value === '') {
    return yandexPvz.value?.points || []
  }

  return yandexPvz.value?.points?.filter(point => point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase())
    || isFitting.value === point.pickup_services.is_fitting_allowed) || []
})

function updatePoint() {
  setCheckoutPickupPoint(checkoutPickupPoint.value)
  open.value = true
}

watch(() => activeTab.value, () => {
  openDeliverySearch.value = activeTab.value === IPvzMapTabs.LIST
})

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

<style lang="scss">
@use '~/assets/scss/utils' as *;

.delivery {
  display: flex;
  flex-direction: row;

  &__sidebar {
    flex-shrink: 0;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    width: 410px;
    padding-inline: 24px;
  }
}
</style>
