<template>
  <div class="summary">
    <div class="summary__info">
      <h3>в заказе &nbsp;&bull;&nbsp; {{ cart?.line_items?.length }} шт</h3>

      <div class="summary__items">
        <div
          v-for="cartItem in cart?.line_items"
          :key="cartItem.variation_id"
        >
          <SummaryCartItem :summary-cart-item="cartItem" />
        </div>
      </div>

      <div class="space-y-2">
        <h3 class="d-flex gap-1 text-center align-items-center">
          Yandex

          <UButton
            size="sm"
            class="text-muted-foreground mla cursor-pointer"
            variant="ghost"
            icon="i-ph-pencil-simple-line"
            @click="setStep('delivery')"
          />
        </h3>

        <DeliveryInfo :show-full-content="false" />
      </div>

      <div class="space-y-2">
        <h3 class="d-flex gap-1 text-center align-items-center">
          Получатель

          <UButton
            size="sm"
            class="text-muted-foreground mla cursor-pointer"
            variant="ghost"
            icon="i-ph-pencil-simple-line"
            @click="setStep('contacts')"
          />
        </h3>

        <div class="flex items-center gap-2">
          <UIcon name="i-ph-user" class="text-muted-foreground" />
          <span>{{ checkoutContacts?.name }} {{ checkoutContacts?.surname }}</span>
        </div>

        <div class="flex items-center gap-2">
          <UIcon name="i-ph-envelope-simple" class="text-muted-foreground" />
          <span>{{ checkoutContacts?.email }}</span>
        </div>

        <div class="flex items-center gap-2">
          <UIcon name="i-ph-phone" class="text-muted-foreground" />
          <span>{{ checkoutContacts?.phone }}</span>
        </div>
      </div>
    </div>

    <PayBlock pay />
  </div>
</template>

<script setup lang="ts">
import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
import PayBlock from '../../components/PayBlock.vue'

const { cart } = useCart()
const { checkoutContacts, setStep } = useCheckout()

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

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

.summary {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  &__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__items {
    display: flex;
    flex-direction: row;
    gap: 4px;
  }
}
</style>
