<template>
  <div class="cart">
    <div class="cart__items">
      <div
        v-for="cartItem in cart?.line_items"
        :key="cartItem.variation_id"
      >
        <CartItem :cart-item="cartItem" />
      </div>
    </div>

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

<script setup lang="ts">
import { useCart } from '~/composables'
import PayBlock from '../components/PayBlock.vue'

const route = useRoute()
const { cart } = useCart()
const { checkoutContacts, checkoutPickupPoint } = useCheckout()

onMounted(async () => {
  if (!route?.query?.ID)
    return

  await $fetch('/api/create', {
    method: 'POST',
    body: {
      payment_method: 'bacs',
      payment_method_title: 'Оплата по реквизитам',
      set_paid: true,
      billing: {
        first_name: checkoutContacts?.value?.name,
        last_name: checkoutContacts?.value?.surname,
        phone: checkoutContacts?.value?.phone,
        email: checkoutContacts?.value?.email,
        address_1: checkoutPickupPoint.value?.address?.full_address,
        postcode: checkoutPickupPoint.value?.address?.postal_code,
        city: checkoutPickupPoint?.value?.address?.locality,
        country: 'RU',
      },
      transaction_id: route?.query?.ID,
      line_items: cart.value.line_items,
      status: 'processing',
    },
  })
})
</script>

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

.cart {
  margin-top: 120px;
  margin-inline: auto;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @include mobile {
    margin-top: 20px;
    flex-direction: column;
  }

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