<template>
  <div class="snt-cart">
    <slot v-bind="slotProps">
      <v-container class="snt-cart__container">
        <div class="snt-cart__title">
          <slot name="header">
            <div class="snt-cart-title">
              ตะกร้าสินค้า
            </div>
          </slot>
        </div>
        <div
          v-if="!!items.length"
          class="snt-cart__items">
          <slot
            v-bind="slotProps"
            name="items">
            <v-data-table
              :value="selectedPurchase"
              :headers="headers"
              :items="items"
              :mobile-breakpoint="0"
              class="snt-cart-items__table"
              show-select
              hide-default-header
              hide-default-footer
              @input="selectePurchase($event)">
              <template #header="{ props }">
                <thead>
                  <tr>
                    <td
                      v-for="(header, i) in props.headers"
                      :key="`header-${i}`"
                      :align="header.align"
                      class="snt-cart-items__td">
                      <div v-if="i === 0">
                        <v-simple-checkbox
                          :value="selectedAll"
                          :ripple="false"
                          @input="selectPurchaseAll($event)" />
                      </div>
                      <div v-else>
                        {{ header.text }}
                      </div>
                    </td>
                  </tr>
                </thead>
              </template>
              <template #[`item.src`]="{ item }">
                <v-img
                  :src="item.pictureUrl"
                  max-width="100"
                  height="100"
                  alt="cart-item" />
              </template>
              <template #[`item.name`]="{ item }">
                <div class="snt-cart-items__name">
                  {{ item.name }}
                </div>
              </template>
              <template #[`item.price`]="{ item }">
                <span class="snt-cart-items__price">
                  {{ item.price | toLocaleString }} บาท
                </span>
              </template>
              <template #[`item.buy`]="{ item }">
                <div class="snt-cart-items__quantity">
                  <snt-number-field
                    :value="item.quantity"
                    :min="1"
                    :max="item.available"
                    controls
                    center
                    @input="selectQuantity(item, $event)" />
                </div>
              </template>
              <template #[`item.sum`]="{ item }">
                <span class="snt-cart-items__sum">
                  {{ item.price * item.quantity | toLocaleString }} บาท
                </span>
              </template>
              <template #[`item.delete`]="{ item }">
                <v-btn
                  :ripple="false"
                  plain
                  text
                  @click="remove(item)">
                  ลบ
                </v-btn>
              </template>
            </v-data-table>
          </slot>
          <slot
            name="action"
            :selectedPurchase="selectedPurchase"
            :totalPrice="totalPrice">
            <v-divider class="snt-cart__divider" />
            <div class="snt-cart-action">
              <div class="snt-cart-action__net-price">
                <div class="snt-cart-action__net-price-title">
                  ราคารวมสินค้าทั้งหมด
                </div>
                <div class="snt-cart-action__net-price-text">
                  {{ totalPrice | toLocaleString }} บาท
                </div>
              </div>
              <v-btn
                :to="{ name: 'SalePageCheckout' }"
                :disabled="!selectedPurchase.length"
                class="snt-cart-action__submit"
                depressed
                large>
                สั่งสินค้า
              </v-btn>
            </div>
          </slot>
        </div>
        <div
          v-else
          class="snt-cart__no-data">
          <slot name="no-data">
            <div class="snt-cart-no-data">
              <div class="snt-cart-no-data">
                <v-icon size="64">
                  mdi-cart-variant
                </v-icon>
                <div class="snt-cart-no-data__title">
                  ยังไม่มีสินค้าในตะกร้า
                </div>
                <v-btn
                  :to="{ name: 'SalePageProducts' }"
                  class="snt-cart__submit"
                  color="primary"
                  depressed
                  large>
                  ไปซื้อสินค้า
                </v-btn>
              </div>
            </div>
          </slot>
        </div>
      </v-container>
    </slot>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import SntNumberField from './NumberField.vue'

export default {
  name: 'SntCart',
  components: { SntNumberField },
  props: {
    noHeader: {
      type: Boolean,
      default: false
    },
    noAction: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      headers: [
        {
          text: '',
          align: 'start',
          sortable: false,
          value: 'src',
          width: '150px'
        },
        {
          text: 'ชื่อ',
          align: 'start',
          sortable: false,
          value: 'name',
          width: '350px'
        },
        {
          text: 'ราคา',
          align: 'start',
          sortable: false,
          value: 'price'
        },
        {
          text: 'จำนวน',
          align: 'start',
          sortable: false,
          value: 'buy'
        },
        {
          text: 'ราคารวม',
          align: 'right',
          sortable: false,
          value: 'sum'
        },
        {
          text: '',
          align: 'start',
          sortable: false,
          value: 'delete'
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      purchases: 'cart/purchases',
      setPurchases: 'cart/setPurchases',
      selectedPurchase: 'cart/selected'
    }),
    items () {
      return this.$_.concat(this.purchases, this.setPurchases)
    },
    totalPrice () {
      let total = 0
      this.selectedPurchase.forEach((item) => {
        total += item.price * item.quantity
      })
      return total
    },
    selectedAll () {
      return this.items.length === this.selectedPurchase.length
    },
    slotProps () {
      return {
        items: this.items,
        remove: this.remove,
        selectQuantity: this.selectQuantity,
        selectedPurchase: this.selectedPurchase,
        selectedAll: this.selectedAll,
        totalPrice: this.totalPrice
      }
    }
  },
  methods: {
    ...mapActions({
      updatePurchases: 'cart/updatePurchases',
      updateSetPurchases: 'cart/updateSetPurchases',
      deletePurchases: 'cart/deletePurchases',
      deleteSetPurchases: 'cart/deleteSetPurchases',
      setSelectedPurchase: 'cart/setSelected'
    }),
    selectPurchaseAll (value) {
      if (!value) {
        this.setSelectedPurchase([])
      } else {
        this.setSelectedPurchase(this.items)
      }
    },
    selectePurchase (items) {
      this.setSelectedPurchase(items)
    },
    selectQuantity (item, value) {
      if (item.__typename === 'Purchase') {
        this.updatePurchases({
          id: item.id,
          quantity: value ? Number(value) : 1
        })
      } else {
        this.updateSetPurchases({
          id: item.id,
          quantity: value ? Number(value) : 1
        })
      }
    },
    remove (item) {
      const selectedPurchase = this.$_.cloneDeep(this.selectedPurchase)
      const index = selectedPurchase.findIndex((e) => e.id === item.id)
      if (index !== -1) {
        selectedPurchase.splice(index, 1)
        this.selectePurchase(selectedPurchase)
      }
      if (item.__typename === 'Purchase') {
        this.deletePurchases(item)
      } else {
        this.deleteSetPurchases(item)
      }
    }
  }
}
</script>

<style>
  .snt-cart-items__table table > thead > tr > th,
  .snt-cart-items__table table > thead > tr > td {
    background: #FFFFFF;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .snt-cart-items__table table > thead > tr:last-child > td {
    border-bottom: thin solid #e4e4e4;
  }
  .snt-cart-items__table table > tbody > tr > td {
    background: #FFFFFF;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
</style>

<style scoped>
  .snt-cart {
    min-height: calc(100vh - 150px);
    background-color: #FFFFFF;
  }
  .snt-cart__title {
    margin-top: 1.25rem;
  }
  .snt-cart__title {
    font-size: 1.25rem;
  }
  .snt-cart-items__table {
    margin-top: 1.25rem;
  }
  .snt-cart-items__quantity {
    min-width: 140px;
    max-width: 140px;
  }
  .snt-cart-items__td {
    min-width: 140px;
  }
  .snt-cart__divider {
    border-top: 1px dashed #e4e4e4;
  }
  .snt-cart-action {
    display: flex;
    background-color: #ffffff;
    padding: 16px;
    align-items: center;
    justify-content: flex-end;
  }
  .snt-cart-action__net-price {
    color: #4E4E4E;
    margin-right: 16px;
  }
  .snt-cart-action__net-price-title {
    font-weight: 500;
  }
  .snt-cart-action__net-price-text {
    color: var(--v-primary-base);
  }
  .snt-cart-action__submit.v-btn {
    line-height: 27px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    background-color: var(--v-primary-base);
  }
  .snt-cart-no-data {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 300px);
    justify-content: center;
    align-items: center;
  }
  .snt-cart-no-data {
    display: flex;
    flex-direction: column;
    height: 300px;
    align-items: center;
    justify-content: center;
  }
  .snt-cart-no-data__title {
    margin: 12px;
  }
  .snt-cart__submit {
    width: 210px;
  }
</style>
