<script setup lang="ts">
import { BasketItemModel } from '@/data/models/basketItemModel';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcPrice, calcProductPrice } from '@/scripts/productScripts';

const basketStore = useBasketStore()

function removeFromBasket(basketItem: BasketItemModel) {
  basketStore.removeItemFromBasket(basketItem)
}
</script>

<template>
  <v-table>
    <thead>
      <tr>
        <th></th>
        <th>{{ $t('product.category') }}</th>
        <th>{{ $t('product.brand') }}</th>
        <th>{{ $t('product.products') }}</th>
        <th class="text-center">{{ $t('quantity') }}</th>
        <th class="text-right">{{ $t('product.productPrice') }}</th>
        <th class="text-right">{{ $t('totalPrice') }}</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="basketItem in basketStore.itemsInBasket">
        <td><v-btn icon="mdi-delete" flat @click="removeFromBasket(basketItem)"/></td>
        <td><v-icon :icon="basketItem.categoryIcon" /> {{ basketItem.categoryName }} </td>
        <td>{{ basketItem.brand }}</td>
        <td>{{ basketItem.name }}</td>
        <td class="text-center">{{ basketItem.quantity }}x</td>

        <td class="text-right">
          <div v-if="basketItem.discount > 0">
            <strong class="font-weight-bold text-body-1 text-red-lighten-1">
              {{ calcPrice(basketItem.price, basketItem.discount) }} €
            </strong>

            <div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.price }} €</div>
          </div>

          <div v-else>
            {{ basketItem.price }} €
          </div>
        </td>


        <td class="text-right">
          <div v-if="basketItem.discount > 0">
            <strong class="font-weight-bold text-body-1 text-red-lighten-1">
              {{ calcPrice(basketItem.price, basketItem.discount, basketItem.quantity) }} €
            </strong>

            <div class="text-decoration-line-through ml-3 mt-1 text-caption">
              {{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
            </div>
          </div>

          <div v-else>
            {{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
          </div>
          </td>
      </tr>
    </tbody>
  </v-table>
</template>