import {
    WasteAdd
} from "./api/waste.js";
import app, {
    showToast
} from "./app.js";
import store from "./store.js";

var $ = Dom7;

// input waste_image
$(document).on('change', 'input#fileuploadInput', function (e) {
  const file = e.target.files[0]
  const reader = new FileReader()

  reader.onload = function (e) {
    document.querySelector('.custom-file-upload label').style.backgroundImage = `url('${e.target.result}')`
    document.querySelector('.custom-file-upload label').style.backgroundSize = 'cover'
  }

  reader.readAsDataURL(file)
})

$(document).on('click', '#submit-waste-add-form', async function (e) {
  var view = app.views.current
  const form = $('form#WasteAddForm')

  const cover_image = form.find('input[name="waste_image"]').prop('files')[0]
  const category    = $('input[name="category"]').val().trim();
  const quantity    = $('input[name="quantity"]').val().trim();
  const location    = $('input[name="location"]').val().trim();
  //const label       = $('input[name="label"]').val().trim();
  const description = $('#waste_description').val();

  if (!cover_image) {
    showToast('Please upload a cover image')
    return
  }

  if (quantity === '') {
      showToast('Please enter quantity (kg)', 'Error');
      return;
  }
  if (category === '') {
      showToast('Please enter category', 'Error');
      return;
  }

  if (location === '') {
      showToast('Please enter your loaction', 'Error');
      return;
  }    

  let base64 = null

  if (cover_image) {
    // Wrap the FileReader in a Promise to wait for it to complete
    base64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(cover_image)

      reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error('Failed to read image as base64'))
    })
  }

  const data = {
      description: description,
      cover_photo: base64,
      quantity: quantity,
      category: category,
      location: location,
  }

  try {
      app.preloader.show()

      const response = await WasteAdd(data)

      app.preloader.hide()

      if (!response || response.error) {
          throw new Error(response.error);
      }

      showToast('Add waste successfully')
      /*
      await store.dispatch('getMyWastes', {
        page: 1,
        clear: true
      })
      */
      view.router.back(`/profile/`, {
        force: true
      })

      //view.router.back()
  } catch (error) {
      app.notification.create({
          titleRightText: 'now',
          subtitle: 'Oops, something went wrong',
          text: error.message || 'Failed to add post',
      }).open()
      app.preloader.hide()
  }
})