<template>
  <div class="delivery">
    <div class="delivery__sidebar">
      <div
        v-for="point in data?.points"
        :key="point.id"
        class="pickup-point-item"
        @click="onPickupClick(point)"
      >
        <h3>Yandex</h3>
        {{ `${point?.address?.street} ${point?.address?.house}` }}
        <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
      </div>
      <pre />
    </div>
    <PvzMap ref="mapRef" :pickup-points="data?.points" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PvzMap from '~/components/PvzMap.vue'

const { data } = useFetch('/api/yandex')

const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)

const onPickupClick = (point: any) => {
  const lat = point?.position?.latitude
  const lon = point?.position?.longitude
  if (typeof lat === 'number' && typeof lon === 'number') {
    mapRef.value?.centerMap(lat, lon)
  }
}
</script>

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

  &__sidebar {
    width: 410px;
    height: calc(100dvh - 54px);
    flex-shrink: 0;
    overflow-y: auto;
  }
}

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

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