import {
  addPost
} from "./api/posts.js";
import app, {
  showToast
} from "./app.js";
import store from "./store.js";
var $ = Dom7;
// input post_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-add-post-form', async function(e) {
  var view = app.views.current
  const form = $('form#addPostForm')
  const cover_image = form.find('input[name="post_image"]').prop('files')[0]
  const description = $('#post_caption').val();
  if (!cover_image) {
    showToast('Please upload a cover image')
    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 = {
    caption: description,
    cover_photo: base64
  }
  try {
    app.preloader.show()
    const response = await addPost(data)
    app.preloader.hide()
    if (!response || response.error) {
      throw new Error(response.error);
    }
    showToast('Add post successfully')
    await store.dispatch('getMyPosts', {
      page: 1,
      clear: true
    })
    view.router.navigate('/')
    //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()
  }
})