<script>
import { ref } from 'vue'
import { editProduct } from "@/components/shop/Products.vue";
import Swal from "sweetalert2";

//

export const showEditProductForm = async (id, name, description, price, category, piktogram, economicProductId, applyCategoryDiscount) => {
  await Swal.fire({
    title: 'Edit Product',
    html: `
      <form id="editProductForm">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text" id="name" value="${name}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Description</label>
          <div class="control">
            <input class="input" type="text" id="description" value="${description}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Price</label>
          <div class="control">
            <input class="input" type="number" id="price" value="${price}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Category</label>
          <div class="control">
            <input class="input" type="text" id="category" value="${category}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Piktogram</label>
          <div class="control">
            <input class="input" type="text" id="piktogram" value="${piktogram}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Economic produkt id</label>
          <div class="control">
            <input class="input" type="number" id="economicProductId" value="${economicProductId}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Apply category discount</label>
          <div class="control">
            <input class="checkbox" type="checkbox" id="applyCategoryDiscount" ${applyCategoryDiscount ? 'checked' : ''} />
          </div>
        </div>
      </form>
    `,
    showCancelButton: true,
    confirmButtonText: 'Edit Product',
    preConfirm: () => {
      editProduct(id, document.getElementById('name').value, document.getElementById('description').value, document.getElementById('price').value, document.getElementById('category').value, document.getElementById('piktogram').value, document.getElementById('economicProductId').value, document.getElementById('applyCategoryDiscount').checked)
          .then(() => {
            Swal.fire('Product edited successfully');
          })
          .catch((e) => {
            Swal.fire('Error', e.response.data.error ?? e.response, 'error');
          });
    }
  });
}

</script>