import app from "./app.js"
import {
  getWasteById
} from "./api/waste.js"
import {
  formatPostDate
} from "./utils.js"
import store from "./store.js"
var $ = Dom7

export function renderWaste(waste) {
  const user = store.getters.user.value

  let waste_actions = `
     <div class="media-waste-actions">
        <div class="media-waste-like" data-waste-id="${waste.id}">
          <i class="icon f7-icons ${waste.is_liked ? \'text-red\' : \'\'}" data-waste-id="${waste.id}">${waste.is_liked ? \'heart_fill\' : \'heart\'}</i>
        </div>
        <div class="media-waste-comment popup-open" data-popup=".comments-popup" data-waste-id="${waste.id}">
          <i class="icon f7-icons">chat_bubble</i>
        </div>
        <div class="media-waste-share popup-open" data-popup=".share-popup">
          <i class="icon f7-icons">paperplane</i>
        </div>
    `

  if (waste.user_id == user.id) {
    waste_actions += `
        <div class="media-waste-edit popup-open" data-popup=".edit-waste-popup" data-waste-id="${waste.id}">
          <i class="icon f7-icons">gear_alt</i>
        </div>
      `
  }

  waste_actions += `</div>`

  const date = formatPostDate(waste.create_at)
  const maxDescriptionLength = 10; // Set your character limit here
  const isLongDescription = waste.caption.length > maxDescriptionLength;
  const shortDescription = isLongDescription ? waste.caption.slice(0, maxDescriptionLength) : waste.caption;
  let imageHeight = 400;

  if (waste.media.length > 0) {
    imageHeight = waste.media[0].media_height;

    if (imageHeight > 400) {
      imageHeight = \'auto\';
    }
  }

  let profile_link;

  if (waste.user_id == user.id) {
    profile_link = `
      <a href="#" class="view-profile">
        <div class="media-waste-avatar" style="background-image: url(\'${waste.user_profile_image || \'assets/img/profile-placeholder.jpg\'}\');"></div>
        <div class="media-waste-user">${waste.username}</div>
      </a>`
  } else {
    profile_link = `
      <a href="/profile-view/${waste.user_id}">
        <div class="media-waste-avatar" style="background-image: url(\'${waste.user_profile_image || \'assets/img/profile-placeholder.jpg\'}\');"></div>
        <div class="media-wasete-user">${waste.username}</div>
      </a>`
  }

  const wasteItem = `
  <div class="media-waste single" data-waste-id="${waste.id}" data-is-liked="${waste.is_liked}">
    <div class="media-single-waste-content">
    <div class="media-waste-header">
        ${profile_link}
        <div class="media-waste-date">${date}</div>
      </div>
      <div class="media-single-waste-content">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            ${waste.media.map(mediaItem => `
                <div class="swiper-slide waste-media" style="height: ${imageHeight};">
                ${mediaItem.media_type === \'video\' ? `
                  <video autoplay loop muted playsinline class="video-background media-waste-video" id="${mediaItem.id}">
                    <source src="${mediaItem.media_url}" type="${mediaItem.media_mime_type}" />
                  </video>
                ` : `
                  <img src="${mediaItem.media_url}" alt="${mediaItem.media_alt}" />
                `}
              </div>
            `).join(\'\')}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      ${waste_actions}
      <div class="media-waste-likecount" data-like-count="${waste.likes_count}">${waste.likes_count} likes</div>
      <div class="media-waste-description">
        <strong>${waste.username}</strong> <br/> <span class="waste-caption">${shortDescription}</span>
        <span class="full-description hidden">${waste.caption}</span>
        ${isLongDescription ? `<span class="media-waste-readmore">... more</span>` : \'\'}
      </div>
      ${waste.comments_count > 0 ? `<div class="media-waste-commentcount popup-open" data-popup=".comments-popup" data-modul="waste" data-waste-id="${waste.id}">View ${waste.comments_count} comments</div>` : \'\'}
    </div>
  </div>`

  return wasteItem
}

export function displayWaste(waste) {
  const wastesContainer = document.getElementById(\'waste-view-container\')
  wastesContainer.innerHTML = \'\' // Clear any existing wastes

  const user = store.getters.user.value

  let waste_actions = `
     <div class="media-waste-actions">
        <div class="media-waste-like" data-waste-id="${waste.id}">
          <i class="icon f7-icons ${waste.is_liked ? \'text-red\' : \'\'}" data-waste-id="${waste.id}">${waste.is_liked ? \'heart_fill\' : \'heart\'}</i>
        </div>
        <div class="media-waste-comment popup-open" data-popup=".comments-popup" data-waste-id="${waste.id}">
          <i class="icon f7-icons">chat_bubble</i>
        </div>
        <div class="media-waste-share popup-open" data-popup=".share-popup">
          <i class="icon f7-icons">paperplane</i>
        </div>
    `

  if (waste.user_id == user.id) {
    waste_actions += `
        <div class="media-waste-edit popup-open" data-popup=".edit-waste-popup" data-waste-id="${waste.id}">
          <i class="icon f7-icons">gear_alt</i>
        </div>
      `
  }

  waste_actions += `</div>`

  const date = formatPostDate(waste.create_at)
  const maxDescriptionLength = 10; // Set your character limit here
  const isLongDescription = waste.caption.length > maxDescriptionLength;
  const shortDescription = isLongDescription ? waste.caption.slice(0, maxDescriptionLength) : waste.caption;
  let imageHeight = 400;

  if (waste.media.length > 0) {
    imageHeight = waste.media[0].media_height;

    if (imageHeight > 800) {
      imageHeight = \'auto\';
    }
  }

  let profile_link;

  if (waste.user_id == user.id) {
    profile_link = `
      <a href="#" class="view-profile">
        <div class="media-waste-avatar" style="background-image: url(\'${waste.user_profile_image || \'assets/img/profile-placeholder.jpg\'}\');"></div>
        <div class="media-waste-user">${waste.username}</div>
      </a>`
  } else {
    profile_link = `
      <a href="/profile-view/${waste.user_id}">
        <div class="media-waste-avatar" style="background-image: url(\'${waste.user_profile_image || \'assets/img/profile-placeholder.jpg\'}\');"></div>
        <div class="media-waste-user">${waste.username}</div>
      </a>`
  }

  const wasteItem = `
  <div class="media-waste single" data-waste-id="${waste.id}" data-is-liked="${waste.is_liked}">
            <div class="media-single-waste-content">
            <div class="media-waste-header">
                ${profile_link}
                <div class="media-waste-date">${date}</div>
              </div>
              <div class="media-single-waste-content">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    ${waste.media.map(mediaItem => `
                       <div class="swiper-slide waste-media" style="height: ${imageHeight};">
                        ${mediaItem.media_type === \'video\' ? `
                          <video autoplay loop muted playsinline class="video-background media-waste-video" id="${mediaItem.id}">
                            <source src="${mediaItem.media_url}" type="${mediaItem.media_mime_type}" />
                          </video>
                        ` : `
                          <img src="${mediaItem.media_url}" alt="${mediaItem.media_alt}" />
                        `}
                      </div>
                    `).join(\'\')}
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
              ${waste_actions}
              <div class="media-waste-likecount" data-like-count="${waste.likes_count}">${waste.likes_count} likes</div>
              <div class="media-waste-description">
                <strong>${waste.username}</strong> <br/> <span class="waste-caption">${shortDescription}</span>
                <span class="full-description hidden">${waste.caption}</span>
                ${isLongDescription ? `<span class="media-waste-readmore">... more</span>` : \'\'}
              </div>
              ${waste.comments_count > 0 ? `<div class="media-waste-commentcount popup-open" data-popup=".comments-popup" data-modul="waste" data-waste-id="${waste.id}">View ${waste.comments_count} comments</div>` : \'\'}
            </div>
          </div>`

  wastesContainer.insertAdjacentHTML(\'beforeend\', wasteItem)
}

$(document).on(\'page:beforein\', \'.page[data-name="waste-view"]\', async function (e) {
  var pathStore = store.getters.getPathData

  var wasteId = e.detail.route.params.id
  var query = e.detail.route.query

  let commentId;

  if (query && query.commentId) {
    commentId = query.commentId
  }

  if (!wasteId || wasteId === \'-1\') {
    return
  }

  let cachedData = null

  try {
    if (pathStore && pathStore.value[`/waste/${wasteId}`]) {
      cachedData = pathStore.value[`/waste/${wasteId}`]
    }
  } catch (error) {
    console.error(\'Error fetching cached data:\', error)
  }

  if (!cachedData) {
    $(\'.loading-fullscreen.waste-view\').show()

    const waste = await getWasteById(wasteId)
    if (!waste) {
      app.dialog.alert(\'Waste not found\', \'Error\')
      return
    }

    store.dispatch(\'setPathData\', {
      path: `/waste/${wasteId}`,
      data: waste,
    })

    cachedData = waste
  } else {
    $(\'.loading-fullscreen.waste-view\').hide()
  }

  displayWaste(cachedData)

  if (commentId) {
    $(\'.media-waste-comment\').click()
  }


  setTimeout(() => {
    // find .comment data-comment-id="${comment.id}" and animate it to glow#
    if (commentId) {
      const comment = $(`.comment[data-comment-id="${commentId}"]`)
      console.log(\'Comment:\', comment);

      if (comment.length > 0) {
        comment.addClass(\'target-highlight\')
        // Scroll to the comment
        document.querySelector(`.comment[data-comment-id="${commentId}"]`).scrollIntoView({
          behavior: \'smooth\', // Optional, adds smooth scrolling
          block: \'start\', // Aligns the element to the top of the view
          inline: \'nearest\' // Aligns the element horizontally in the viewport
        });

      }

      setTimeout(() => {
        comment.removeClass(\'target-highlight\')
      }, 3000)
    }
  }, 2000)
})