import Vue from 'vue'
import './SntProduct.scss'
import { mapActions } from 'vuex'
import { VImg, VSpacer } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntProduct',
  components: { VImg, VSpacer },
  props: {
    id: {
      type: [Number, String],
      required: true
    },
    isCollection: {
      type: Boolean,
      required: true
    },
    pictureUrl: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    subProducts: {
      type: Array,
      default: () => ([])
    },
    description: {
      type: String,
      default: ''
    },
    price: {
      type: [String, Number],
      default: 0
    },
    stock: {
      type: [String, Number],
      default: 0
    },
    showSku: {
      type: Boolean,
      default: true
    },
    showDescription: {
      type: Boolean,
      default: false
    },
    showPrice: {
      type: Boolean,
      default: true
    },
    showStock: {
      type: Boolean,
      default: true
    },
    showCart: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    slotProps () {
      return {
        item: {
          id: this.id,
          isCollection: this.isCollection,
          pictureUrl: this.pictureUrl,
          name: this.name,
          subProducts: this.subProducts,
          description: this.description,
          price: this.price,
          stock: this.stock
        },
        showSku: this.showSku,
        showDescription: this.showDescription,
        showPrice: this.showPrice,
        showStock: this.showStock,
        showCart: this.showCart,
        isMain: this.isMain,
        routerLink: this.routerLink,
        addToCart: this.addToCart
      }
    },
    routerLink () {
      return {
        name: this.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
        params: {
          productId: this.id
        }
      }
    }
  },
  methods: {
    ...mapActions({
      addToCart: 'cart/addToCart'
    }),
    isMain (subProductName) {
      return !subProductName || subProductName === 'main'
    },
    addCart () {
      let name = this.name
      const selectedPurchase = this.$_.head(this.subProducts)
      if (!this.isCollection) {
        if (selectedPurchase.name !== 'main') {
          name += ` (${selectedPurchase.name})`
        }
      }
      this.addToCart({
        id: selectedPurchase.id,
        price: selectedPurchase.price,
        available: selectedPurchase.available,
        name,
        pictureUrl: this.pictureUrl,
        isCollection: this.isCollection,
        quantity: 1
      })
      this.$shipnity.notification.success('เพิ่มสินค้าลงตะกร้า')
    }
  },
  template: `
    <div class="snt-product">
      <div class="snt-product__container">
        <slot v-bind="slotProps">
          <snt-link
            :to="routerLink"
            :label="name"
            class="snt-product__link">
            <template #activator="{ label }">
              <div class="snt-product__image">
                <v-img
                  :src="pictureUrl"
                  class="snt-product-image__img"
                  height="100%"
                  contain
                />
              </div>
              <div class="snt-product__title">
                {{ label }}
              </div>
            </template>
          </snt-link>
          <div
            v-if="showSku"
            class="snt-product__sku mb-2">
            <template v-for="(sub, i) in subProducts">
              <span
                v-if="!isMain(sub.name)"
                :key="'product-sku-'+i">
                {{ sub.name }}
              </span>
            </template>
          </div>
          <v-spacer />
          <div
            v-if="showDescription"
            class="snt-product__description">
            {{ description }}
          </div>
          <div
            v-if="showPrice"
            class="snt-product__price mb-1">
            {{ price | toLocaleString }} บาท
          </div>
          <div
            v-if="showStock"
            class="snt-product__stock mb-2">
            <div v-if="stock > 0">
              เหลือ {{ stock | toLocaleString }} ชิ้น
            </div>
            <div v-else>
              สินค้าหมด
            </div>
          </div>
          <div
            v-if="showCart"
            class="snt-product-cart">
            <snt-button
              :disabled="stock < 1"
              class="snt-product-cart__btn"
              color="primary"
              outlined
              depressed
              @click="addCart()">
              <snt-icon
                icon="mdi-cart-outline"
                left />
              ใส่ตะกร้า
            </snt-button>
          </div>
        </slot>
      </div>
    </div>
  `
})
