<template>
  <div class="create-plan__cart-product">
    <div class="create-plan__cart-close" @click="removeProduct"></div>
    <strong>{{ product.translation.name }}</strong>
    <div class="create-plan__cart-label">

      <template  v-if="product.levels.length > 0">
        <span class="cart-level">{{ product.levels[cartState.level][0] }} - </span>
        <span>{{ displayCorrectCurrency(pricing[0], pricing[1]) }}</span> {{ trans('power_user_month') }}
      </template>
      <template  v-else-if="pricePerWarehouse">
        <span class="cart-level">{{cartState.amount}}x - </span>
        <span>{{ displayCorrectCurrency(pricing[0], pricing[1]) }}</span>
        {{ trans('power_user_warehouse_month') }}
      </template>
      <template  v-else-if="product.pricing_product_type === 'addon'">
        <span class="cart-level">{{cartState.amount}}x - </span>
        <span>{{ displayCorrectCurrency(pricing[0], pricing[1]) }}</span>
      </template>
      <template v-else>
        <span>{{ displayCorrectCurrency(pricing[0], pricing[1]) }}</span> {{ trans('power_user_month') }}
      </template>

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

<script>
export default {
  name: "cartProduct",
  props: {
    product: {
      type: Object,
      required: true
    },
    cartState: {
      type: Object,
      required: true
    },
    pricePerWarehouse: {
      required: false
    }
  },
  methods: {
    removeProduct() {
      this.$root.productsInCart = this.$root.productsInCart.filter(p => p.id != this.product.id)
    }
  },
  computed: {
    pricing() {

      if(this.product.levels.length > 0) {
        const level = this.product.levels[this.cartState.level]
        return [parseFloat(level[1]), parseFloat(level[2])]
      }

      return [parseFloat(this.product.euro_price), parseFloat(this.product.dollar_price)]
    }
  }
}
</script>

<style scoped>

</style>