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

export function renderPost(post) {
  const user = store.getters.user.value

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

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

  post_actions += `</div>`

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

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

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

  let profile_link;

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

  const postItem = `
  <div class="media-post single" data-post-id="${post.id}" data-is-liked="${post.is_liked}">
    <div class="media-single-post-content">
    <div class="media-post-header">
        ${profile_link}
        <div class="media-post-date">${date}</div>
      </div>
      <div class="media-single-post-content">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            ${post.media.map(mediaItem => `
                <div class="swiper-slide post-media" style="height: ${imageHeight};">
                ${mediaItem.media_type === 'video' ? `
                  <video autoplay loop muted playsinline class="video-background media-post-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>
      ${post_actions}
      <div class="media-post-likecount" data-like-count="${post.likes_count}">${post.likes_count} likes</div>
      <div class="media-post-description">
        <strong>${post.username}</strong> <br/> <span class="post-caption">${shortDescription}</span>
        <span class="full-description hidden">${post.caption}</span>
        ${isLongDescription ? `<span class="media-post-readmore">... more</span>` : ''}
      </div>
      ${post.comments_count > 0 ? `<div class="media-post-commentcount popup-open" data-popup=".comments-popup" data-post-id="${post.id}">View ${post.comments_count} comments</div>` : ''}
    </div>
  </div>`

  return postItem
}

export function displayPost(post) {
  const postsContainer = document.getElementById('post-view-container')
  postsContainer.innerHTML = '' // Clear any existing posts

  const user = store.getters.user.value

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

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

  post_actions += `</div>`

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

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

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

  let profile_link;

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

  const postItem = `
  <div class="media-post single" data-post-id="${post.id}" data-is-liked="${post.is_liked}">
            <div class="media-single-post-content">
            <div class="media-post-header">
                ${profile_link}
                <div class="media-post-date">${date}</div>
              </div>
              <div class="media-single-post-content">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    ${post.media.map(mediaItem => `
                       <div class="swiper-slide post-media" style="height: ${imageHeight};">
                        ${mediaItem.media_type === 'video' ? `
                          <video autoplay loop muted playsinline class="video-background media-post-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>
              ${post_actions}
              <div class="media-post-likecount" data-like-count="${post.likes_count}">${post.likes_count} likes</div>
              <div class="media-post-description">
                <strong>${post.username}</strong> <br/> <span class="post-caption">${shortDescription}</span>
                <span class="full-description hidden">${post.caption}</span>
                ${isLongDescription ? `<span class="media-post-readmore">... more</span>` : ''}
              </div>
              ${post.comments_count > 0 ? `<div class="media-post-commentcount popup-open" data-popup=".comments-popup" data-post-id="${post.id}">View ${post.comments_count} comments</div>` : ''}
            </div>
          </div>`

  postsContainer.insertAdjacentHTML('beforeend', postItem)
}

// $(document).on('touchstart', '.media-single-post-content .swiper-wrapper', detectDoubleTapClosure((e) => {
//   const parent = e.closest('.media-post')
//   const postId = parent.getAttribute('data-post-id')
//   const isLiked = parent.getAttribute('data-is-liked') === 'true'

//   if (isLiked) {
//     return
//   }

//   togglePostLike(postId, true)
// }), {
//   passive: false
// })

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

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

  let commentId;

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

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

  let cachedData = null

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

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

    const post = await getPostById(postId)
    if (!post) {
      app.dialog.alert('Post not found', 'Error')
      return
    }

    store.dispatch('setPathData', {
      path: `/post/${postId}`,
      data: post,
    })

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

  displayPost(cachedData)

  if (commentId) {
    $('.media-post-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)
})