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

    <div>
      <div class="cart__create-order">
        <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
        <div>{{ `Сумма: ${cart?.line_items?.length}` }}</div>

        <UButton class="w-100 d-flex" @click="router.push(`/checkout/delivery`)">
          Перейти к оформлению
        </UButton>
      </div>
    </div>
  </div>
</template>

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

const router = useRouter()
const route = useRoute()
const { cart } = useCart()

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

  await $fetch('/api/create', {
    method: 'POST',
    body: {
      payment_method: 'bacs',
      payment_method_title: 'Оплата по реквизитам',
      set_paid: false,
      billing: {
        first_name: 'Иван',
        last_name: 'Иванов',
        address_1: 'ул. Ленина, 1',
        city: 'Москва',
        country: 'RU',
        email: 'ivan@example.com',
        phone: '+79990000000',
      },
      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;
  }

  &__create-order {
    box-shadow: 1px 1px 8px 0 black;
    border-radius: 10px;
    padding: 10px;
    max-width: 360px;

    display: inline-flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>
