<template>
  <div class="container">
    <div class="row" style="text-align:left">
      <!--Column 1 -->
      <div class="col-md-6" style="margin-bottomL 1em">
        <div class="row" style="text-align:left">
          <div class="carousel-item-c">
            <div class="card-box-b card-shadow news-box">
              <div class="img-box-b">
                <img v-if="item.image !== ''" :src="item.image" alt class="img-b img-fluid" />
                <img
                  v-else
                  src="../../../public/img/DefaultImg.png"
                  alt
                  class="img-b img-fluid"
                  style="object-fit: cover;"
                />
              </div>
              <div class="card-overlay">
                <div class="card-header-b">
                  <div class="card-title-b">
                    <h2 class="title-2" style="color: #ffffff;">{{ item.name }}</h2>
                  </div>
                  <div class="card-date">
                    <span class="date-a">{{ item.description }}</span>
                  </div>
                  <br />
                  <div class="card-category-b">
                    <span class="category-b">
                      <b>{{ item.displayPrice }}</b>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" style="margin-top: 1em">
            <div class="row">
              <div class="col-sm-2">
                <button
                  @click="Minus()"
                  class="btn btn-b-n"
                  type="button"
                  style="border-radius:50px"
                >
                  <eva-icon name="minus-outline" fill="white"></eva-icon>
                </button>
              </div>
              <div class="col-sm-1">
                <label style="margin-top: 0.5em">{{qty}}</label>
              </div>
              <div class="col-sm-2">
                <button
                  @click="Plus()"
                  class="btn btn-b-n"
                  type="button"
                  style="border-radius:50px"
                >
                  <eva-icon name="plus-outline" fill="white"></eva-icon>
                </button>
              </div>
              <div class="col-sm-2">
                <label style="margin-top: 0.5em">
                  <b>{{SubTotal | toCurrency}}</b>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Column 2 -->
      <div class="col-md-6" style="margin-bottomL 1em">
        <div class="row" style="text-align:left">
          <div class="container" v-for="(item, i) in item.options" :key="i">
            <div class="row">
              <div class="col-sm-12">
                <div class="title-box-d">
                  <h3 class="title-d">{{ item.description }}</h3>
                </div>
              </div>
            </div>
            <div class="row" v-if="item.subTitle">
              <div class="col-sm-12">{{ item.subTitle }}</div>
            </div>
            <hr v-if="item.subTitle" />
            <optionSelector
              :item="item"
              @UpdateSelection="UpdateSelection"
              @UpdateSelectionQty="UpdateSelectionQty"
            />
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-sm-12">
            <label>Special Instructions</label>
            <div class="input-group-prepend">
              <textarea
                class="form-control editor form-control-lg form-control-a"
                v-model="item.specialInstructions"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <br />
    </div>

    <div class="row">
      <div class="col-md-12" style="margin-top: 1em">
        <button @click="AddToCart()" class="btn btn-b-n" type="button">Add To Cart</button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12" style="margin-top: 1em">
        <button @click="Close()" class="btn btn-b-n" type="button">Back</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import optionSelector from "../orders/orderOptionSelection";

export default {
  name: "MenuOptions",
  props: {
    showItem: { default: {} }
  },
  components: {
    optionSelector
  },
  data() {
    return {
      wait: true,
      item: {},
      qty: 1,
      subTotal: 0,
      selection: []
    };
  },
  methods: {
    Close() {
      this.item.specialInstructions = "";
      this.selection = [];
      this.qty = 1;
      this.$emit("CloseOptions", false);
    },
    Plus() {
      this.qty = this.qty + 1;
    },
    Minus() {
      this.qty = this.qty - 1;
      if (this.qty === 0) {
        this.qty = 1;
      }
    },
    CheckItem(value) {
      alert(JSON.stringify(value));
    },
    UpdateSelection(value) {
      if (value.value) {
        this.selection.push(value.field);
      } else {
        for (let i = 0; i < this.selection.length; i++) {
          if (this.selection[i].id === value.field.id) {
            this.selection.splice(i, 1);
          }
        }
      }
    },
    UpdateSelectionQty(value) {
      this.selection.find(s => s.id == value.id).qty = value.qty;
    },
    AddToCart() {
      const cartItem = {
        id: this.item.id,
        description: this.item.description,
        image: this.item.image,
        name: this.item.name,
        subTotal: this.subTotal,
        specialInstructions: this.specialInstructions,
        qty: this.qty,
        selection: this.selection
      };

      this.cartItems.push(cartItem);
      this.item.specialInstructions = "";
      this.selection = [];
      this.qty = 1;
      this.$emit("CloseOptions", false);
    }
  },
  computed: {
    ...mapState("cart", ["cartItems"]),
    SubTotal() {
      var price = this.item.price * this.qty;

      for (let i = 0; i < this.selection.length; i++) {
        if (this.selection[i].price > 0) {
          let optionPrice = this.selection[i].price * this.selection[i].qty;
          price = price + optionPrice;
        }
      }
      return price;
    }
  },
  watch: {
    showItem: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.item = val;
          this.subTotal = this.item.price;
        }
      }
    }
  }
};
</script>
