<script>
import { bulkItemsHandler } from "@/helpers/bulk-items-select";
export default {
  name: "BulkItemsSelect",
  mixins: [bulkItemsHandler],
  emits: ["closed", "confirmed"],
  props: {
    fetchUrl: {
      type: String,
      default: "stock/products/search",
    },
    incrementQuantity: {
      type: Boolean,
      default: true,
    },
  },
  data: () => ({}),
  beforeMount() {
    if (!this.items.length) {
      this.$store.commit("SET_AJAX_TASK", "GET_BULK_SELECT_ASSETS");
      this.$http.get(this.fetchUrl).then((response) => {
        this.rows = response.data;
      });
    }
  },
  methods: {
    handleSelectedItem(item) {
      if (!this.selectedItems.includes(item.id)) {
        if (this.incrementQuantity) {
          this.items.push({
            ...item,
            ...{ quantity: 1, price: item.cost_price || 0, available_qty: item.quantity },
          });
        } else {
          this.items.push(item);
        }
      } else {
        let index = this.selectedItems.indexOf(item.id);
        this.removeItem(index);
      }
    },
  },
};
</script>
<template>
  <div class="modal-open bulk-select">
    <div class="modal-backdrop fade show">&nbsp;</div>
    <div class="modal fade d-block show">
      <div class="modal-dialog modal-xlg p-0">
        <div class="modal-content">
          <div class="modal-header ember-view">
            <h5 class="modal-title">{{ $trans("Add Items in Bulk") }}</h5>
            <span
              class="close no-outline cursor-pointer"
              @click="$emit('closed')"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-x"
              >
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </span>
          </div>
          <div class="modal-body p-0 clearfix bulk-select-item">
            <div class="autocomplete-section">
              <div class="item-autocomplete ember-view">
                <div class="dropdown show ac-dropdown ember-view d-block">
                  <div class="textarea-section">
                    <div class="search-box">
                      <div class="position-relative">
                        <input
                          type="text"
                          class="form-control rounded"
                          placeholder="Search for products"
                          v-model="searchKey"
                        />
                        <i class="uil uil-search search-icon"></i>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex justify-content-center" v-if="showLoader">
                    <div class="spinner-border" role="status">
                      <span class="visually-hidden">{{ $trans("Loading") }} ...</span>
                    </div>
                  </div>
                  <div class="ac-dropdown-menu" v-else>
                    <ul class="ac-dropdown-results input-block-level">
                      <li
                        class="ac-option inactive"
                        v-for="item in filteredRows"
                        :key="item.id"
                        :class="{
                          selected: selectedItems.includes(item.id),
                        }"
                        @click="handleSelectedItem(item)"
                      >
                        <span tabindex="-1">
                          <div class="autocomplete-option" title="farine">
                            <div class="ac-name-rate-sku">
                              <div class="ac-name">{{ item.name }}</div>
                              <div class="grey-text"></div>
                            </div>
                            <div class="ac-stock">
                              <div class="ac-stock-label">{{ $trans("Stock in Hand") }}</div>
                              <div class="stock-available">
                                {{ $helper.formatNumber(item.quantity) }}
                                {{ item.unit }}
                              </div>
                            </div>
                            <div class="svg-tick">
                              <div
                                class="tick-filled"
                                v-if="selectedItems.includes(item.id)"
                              >
                                <svg
                                  width="18px"
                                  data-name="Layer 1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 512 512"
                                  class="icon icon-xlg"
                                >
                                  <path
                                    d="M256.36.21C115 .21.36 114.83.36 256.21s114.62 256 256 256 256-114.61 256-256-114.61-256-256-256zm134.32 225.48L254.37 362a22.5 22.5 0 01-31.82 0l-70.79-70.79a22.5 22.5 0 1131.82-31.82l54.88 54.88 120.4-120.4a22.5 22.5 0 0131.82 31.82z"
                                    transform="translate(-.36 -.21)"
                                  ></path>
                                  <path
                                    d="M358.86 193.87l-120.4 120.4-54.88-54.88a22.5 22.5 0 10-31.82 31.82L222.55 362a22.5 22.5 0 0031.82 0l136.31-136.31a22.5 22.5 0 00-31.82-31.82z"
                                    transform="translate(-.36 -.21)"
                                    fill="#fff"
                                  ></path>
                                </svg>
                              </div>
                              <div class="hover-tick d-inline" v-else>
                                <svg
                                  id="Layer_1"
                                  data-name="Layer 1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 512 512"
                                  class="icon icon-xlg"
                                >
                                  <path
                                    d="M256.36.21C115 .21.36 114.83.36 256.21s114.62 256 256 256 256-114.61 256-256-114.61-256-256-256zm134.32 225.48L254.37 362a22.5 22.5 0 01-31.82 0l-70.79-70.79a22.5 22.5 0 1131.82-31.82l54.88 54.88 120.4-120.4a22.5 22.5 0 0131.82 31.82z"
                                    transform="translate(-.36 -.21)"
                                  ></path>
                                  <path
                                    d="M358.86 193.87l-120.4 120.4-54.88-54.88a22.5 22.5 0 10-31.82 31.82L222.55 362a22.5 22.5 0 0031.82 0l136.31-136.31a22.5 22.5 0 00-31.82-31.82z"
                                    transform="translate(-.36 -.21)"
                                    fill="#fff"
                                  ></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="selected-items-section">
              <h4 class="items-heading text-regular">
                {{ $trans("Selected Items") }}
                <div class="d-inline-block">
                  <span class="badge rounded-pill bg-primary">{{
                    items.length
                  }}</span>
                </div>
              </h4>
              <div class="items-list">
                <div
                  class="selected-item"
                  v-for="(row, i) in items"
                  :key="'items' + i"
                >
                  <span class="item-name"> {{ row.name }}</span>
                  <span v-if="incrementQuantity" class="quantity-section"
                    ><div class="ember-view">
                      <div class="input-group">
                        <div class="input-group-text">
                          <span
                            class="cursor-pointer decrement-button"
                            @click="decrementQty(i)"
                            ><svg
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 512 512"
                              class="icon icon-xsmall"
                            >
                              <path
                                d="M483.7 228H28.3c-15.5 0-28 12.5-28 28s12.5 28 28 28h455.3c15.5 0 28-12.5 28-28s-12.5-28-27.9-28z"
                              ></path></svg
                          ></span>
                        </div>
                        <input
                          class="ember-text-field text-right ember-view form-control"
                          type="number"
                          v-model="row.quantity"
                        />
                        <div class="input-group-text">
                          <span
                            class="cursor-pointer increment-button"
                            @click="incrementQty(i)"
                            ><svg
                              version="1.1"
                              id="Layer_1"
                              xmlns="http://www.w3.org/2000/svg"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              xml:space="preserve"
                              class="icon icon-xsmall"
                            >
                              <path
                                d="M484 227H284V28c0-15.5-12.5-28-28-28s-28 12.5-28 28v199H28c-15.5 0-28 12.5-28 28v1c0 15.5 12.5 28 28 28h200v200c0 15.5 12.5 28 28 28s28-12.5 28-28V284h200c15.5 0 28-12.5 28-28v-1c0-15.5-12.5-28-28-28z"
                              ></path></svg
                          ></span>
                        </div>
                      </div></div
                  ></span>
                  <span class="cancel-item-section" @click="removeItem(i)"
                    ><i class="action cancel-circled"
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        class="icon align-middle"
                      >
                        <path
                          d="M256 32c30.3 0 59.6 5.9 87.2 17.6 26.7 11.3 50.6 27.4 71.2 48s36.7 44.5 48 71.2c11.7 27.6 17.6 56.9 17.6 87.2s-5.9 59.6-17.6 87.2c-11.3 26.7-27.4 50.6-48 71.2s-44.5 36.7-71.2 48C315.6 474.1 286.3 480 256 480s-59.6-5.9-87.2-17.6c-26.7-11.3-50.6-27.4-71.2-48s-36.7-44.5-48-71.2C37.9 315.6 32 286.3 32 256s5.9-59.6 17.6-87.2c11.3-26.7 27.4-50.6 48-71.2s44.5-36.7 71.2-48C196.4 37.9 225.7 32 256 32m0-32C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0z"
                        ></path>
                        <path
                          d="M284.3 250.3l62.3-62.3c6.2-6.2 6.2-16.2 0-22.4l-.2-.2c-6.2-6.2-16.2-6.2-22.4 0l-62.3 62.3c-3.1 3.1-8.2 3.1-11.3 0L188 165.4c-6.2-6.2-16.2-6.2-22.4 0l-.2.2c-6.2 6.2-6.2 16.2 0 22.4l62.3 62.3c3.1 3.1 3.1 8.2 0 11.3L165.4 324c-6.2 6.2-6.2 16.2 0 22.4l.2.2c6.2 6.2 16.2 6.2 22.4 0l62.3-62.3c3.1-3.1 8.2-3.1 11.3 0l62.3 62.3c6.2 6.2 16.2 6.2 22.4 0l.2-.2c6.2-6.2 6.2-16.2 0-22.4l-62.3-62.3c-3-3.2-3-8.2.1-11.4z"
                        ></path></svg></i
                  ></span>
                </div>
              </div>
              <div class="items-footer">
                <button
                  class="btn btn-primary ember-view"
                  type="button"
                  @click="$emit('confirmed', items)"
                  :disabled="!items.length"
                >
                  {{ $trans("Add Items") }}
                </button>
                <button
                  class="btn btn-secondary ms-2"
                  @click="$emit('closed')"
                  type="button"
                >
                  {{ $trans("Cancel") }}
                </button>
                <div class="d-inline-block"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
