<template>
  <div class="delivery__search">
    <UInput
      v-model="searchTerm"
      size="xl"
      class="w-full"
      placeholder="Выберите пункт выдачи"
      :ui="{ trailing: 'pe-1' }"
    >
      <template v-if="searchTerm?.length" #trailing>
        <UButton
          color="neutral"
          variant="link"
          size="sm"
          icon="i-lucide-circle-x"
          aria-label="Clear input"
          @click="searchTerm = ''"
        />
      </template>
    </UInput>

    <div class="pickup-point-card__items">
      <div
        v-for="pickupPoint in filteredPoints"
        :key="pickupPoint.id"
        class="pickup-point-card"
        @click="onSelectPoint(pickupPoint)"
      >
        <div class="pickup-point-card__content">
          <h3>Yandex</h3>
          <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
          <h3>Как определить стоимость ?</h3>
        </div>
        <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PickupPoint } from '#shared/yandex_pvz'
import type { PropType } from 'vue'
import { defineEmits } from 'vue'

defineProps<{ filteredPoints: PickupPoint[] }>()
const emit = defineEmits(['update:checkout-pickup-point'])

const checkoutPickupPoint = defineModel('checkoutPickupPoint', {
  type: Object as PropType<PickupPoint>,
  default: () => undefined,
})

const searchTerm = defineModel('searchTerm', { type: String, default: '' })

const onSelectPoint = (pickupPoint: PickupPoint) => {
  checkoutPickupPoint.value = pickupPoint
  emit('update:checkout-pickup-point', pickupPoint)
}
</script>

<style lang="scss">
.pickup-point-card {
  position: relative;
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;

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

    @include mobile {
      height: calc(100dvh - 72px - 40px - 32px);
    }
  }

  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__action {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #999;
  }
}
</style>
