<template>
  <q-dialog v-model="showAddToWishListDialog">
    <q-card class="dialog-width">
      <q-bar>
        <div>Add to Wish List</div>
        <q-space />
        <q-btn dense flat icon="close" label="Close" v-close-popup />
      </q-bar>
      <q-card-section style="text-align: left">
        <p>[{{ wishListItemNum }}] {{ wishListItemDesc }}</p>
        <div class="q-mb-md">
          <label>Wish List Name</label>
          <q-select
            outlined
            dense
            v-model="wishListName"
            :options="wishListNames"
            class="wish-list-name q-mb-md"
          >
            <template v-slot:after>
              <q-btn
                flat
                dense
                icon="add"
                class="q-mr-sm"
                label="Add New"
                @click="addNewName"
              />
            </template>
          </q-select>
          <label>Quantity</label>
          <input
            type="number"
            min="1"
            name="wishlistAddQty"
            id="wishlistAddQty"
            class="form-control q-mb-md"
            placeholder="Qty to Add"
            v-model="wishListItemQty"
          />
          <label>Comments</label>
          <input
            type="text"
            name="wishlistComments"
            id="wishlistComments"
            class="form-control q-mb-md"
            v-model="wishListItemComments"
          />
        </div>

        <div class="row justify-end q-mt-sm">
          <button
            type="button"
            class="btn btn-gray col-auto"
            id="continueAddToHotlist"
            @click="addItem"
            v-close-popup
          >
            Add to Wish List
          </button>
          <button
            type="button"
            class="btn btn-gray col-auto q-ml-md"
            v-close-popup
          >
            Close
          </button>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { watch } from 'vue';

const globalStore = window.PiniaStores.useGlobalStore();
const wishListStore = window.PiniaStores.useWishListStore();
const {
  showAddToWishListDialog,
  wishListItemNum,
  wishListItemDesc,
  wishListItemQty,
  wishListItemComments,
  wishListNames,
  wishListName,
} = window.Pinia.storeToRefs(wishListStore);

const addNewName = () => {
  globalStore.$q
    .dialog({
      message: 'Enter new wish list name:',
      prompt: {
        model: '',
        type: 'text', // optional
      },
      cancel: true,
    })
    .onOk((value) => {
      wishListName.value = value;
    });
};

const addItem = async () => {
  const response = await wishListStore.addItem();
  if (globalStore.isSuccessful(response)) {
    wishListItemQty.value = 1;
    wishListItemComments.value = '';
  }
};

watch(
  showAddToWishListDialog,
  () => showAddToWishListDialog.value && wishListStore.getWishLists()
);
</script>

<style scoped>
.dialog-width {
  width: 500px;
  min-width: 350px;
  height: max-content;
}

.wish-list-name {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
</style>
