carhop__dynamiques-theme__PROD-DEV/resources/js/singles/like-button.ts

// =============================================================================
// TYPE DECLARATIONS
// =============================================================================

declare var Notyf: any;

// =============================================================================
// UTILITY FUNCTIONS
// =============================================================================

function getPostType() {
  const isSingleArticle = document.querySelector('.page--single-articles');
  const isSingleRevue = document.querySelector('.page--single-revue');
  if (isSingleArticle) {
    return 'article';
  } else if (isSingleRevue) {
    return 'revue';
  }
  return null;
}

function getPostId() {
  const postType = getPostType();
  if (!postType) return;
  const postId =
    postType === 'article'
      ? document.querySelector('.page--single-articles')?.getAttribute('data-article-id')
      : document.querySelector('.page--single-revue')?.getAttribute('data-revue-id');
  return postId;
}

// =============================================================================
// LIKE TRACKING FUNCTIONS
// =============================================================================

/**
 * Clé localStorage pour stocker les posts likés
 */
const LIKED_POSTS_KEY = 'dynamiques_liked_posts';

/**
 * Récupère la liste des posts likés depuis localStorage
 */
function getLikedPosts(): string[] {
  try {
    const likedPosts = localStorage.getItem(LIKED_POSTS_KEY);
    return likedPosts ? JSON.parse(likedPosts) : [];
  } catch (error) {
    console.error('Erreur lecture localStorage:', error);
    return [];
  }
}

/**
 * Ajoute un post à la liste des posts likés
 */
function addLikedPost(postId: string): void {
  try {
    const likedPosts = getLikedPosts();
    if (!likedPosts.includes(postId)) {
      likedPosts.push(postId);
      localStorage.setItem(LIKED_POSTS_KEY, JSON.stringify(likedPosts));
    }
  } catch (error) {
    console.error('Erreur sauvegarde localStorage:', error);
  }
}

/**
 * Vérifie si un post a déjà été liké
 */
function isPostLiked(postId: string): boolean {
  const likedPosts = getLikedPosts();
  return likedPosts.includes(postId);
}

// =============================================================================
// LIKE API FUNCTIONS
// =============================================================================

async function likePost(postId: string): Promise<boolean> {
  // Vérifier si le post a déjà été liké
  if (isPostLiked(postId)) {
    console.log(`Post ${postId} déjà liké !`);
    showAlreadyLikedMessage();
    return false;
  }

  try {
    const response = await fetch(`/wp-json/dynamiques-datas/v1/build/articles/like`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        post_id: postId,
      }),
    });
    const data = await response.json();

    if (data.success) {
      console.log(`Post ${postId} liké ! Nouveau total: ${data.likes_count} likes`);

      // Sauvegarder le like dans localStorage
      addLikedPost(postId);

      // Mettre à jour l'interface utilisateur
      updateLikeDisplay(data.likes_count);
      updateLikeButtonState();

      // Afficher message de succès
      showLikeSuccessMessage(data.likes_count);

      return true;
    } else {
      console.error('Erreur API:', data);
      return false;
    }
  } catch (error) {
    console.error('Erreur lors du like:', error);
    return false;
  }
}

// =============================================================================
// UI UPDATE FUNCTIONS
// =============================================================================

function updateLikeDisplay(likesCount: number) {
  // Mettre à jour l'affichage du compteur de likes dans l'interface
  const likeCountElement = document.querySelector('.socials-buttons .likes-count');
  const likeButton = document.querySelector('.socials-buttons__button--like');

  if (likeCountElement && likeButton) {
    likeButton.setAttribute('data-likes-count', `${likesCount}`);
    likeButton.classList.add('is-disabled');
    likeCountElement.textContent = `${likesCount}`;
  }
}

function updateLikeButtonState() {
  const postId = getPostId();
  const likeButton = document.querySelector('.socials-buttons__button--like');
  if (!postId || !likeButton) return;

  const hasAlreadyLiked = isPostLiked(postId);
  if (hasAlreadyLiked) {
    const actionText = likeButton.querySelector('.button-action-text');
    if (actionText) {
      actionText.textContent = 'Déjà liké';
    }
    likeButton.setAttribute('title', 'Déjà liké !');
    return;
  }

  if (!hasAlreadyLiked) {
    likeButton.classList.remove('is-disabled');
  }
}

function updateLikesCountIndicator() {
  const likesCountIndicator = likeButton.querySelector('.likes-count');
  const likesCount = likeButton.getAttribute('data-likes-count');

  if (likesCount && likesCountIndicator) {
    likesCountIndicator.textContent = `${parseInt(likesCount) + 1}`;
  }
}

function showAlreadyLikedMessage() {
  const notyf = new Notyf({
    duration: 3000,
    ripple: false,
    dismissible: true,
    types: [
      {
        type: 'error',
        background: '#ff6b6b',
        icon: {
          className: 'notyf__icon--error',
          tagName: 'i',
          // Pas de text personnalisé pour garder l'icône d'erreur par défaut
        },
      },
    ],
    position: {
      x: 'right',
      y: 'top',
    },
  });

  notyf.error(' Vous avez déjà liké ce post ! ❤️');
}

function showLikeSuccessMessage(likesCount: number) {
  const notyf = new Notyf({
    duration: 2000,
    ripple: false,
    dismissible: true,
    types: [
      {
        type: 'success',
        background: '#10B981',
        icon: {
          className: 'notyf__icon--success',
          tagName: 'i',
          text: '❤️',
        },
      },
    ],
    position: {
      x: 'right',
      y: 'top',
    },
  });

  notyf.success(
    `Merci pour votre like ! <br>Total: ${likesCount} like${likesCount > 1 ? 's' : ''}`
  );
}

// =============================================================================
// MAIN INITIALIZATION FUNCTION
// =============================================================================

export default function handleLikeButton(): void {
  const likeButton: HTMLElement | null = document.querySelector(
    '.socials-buttons  .socials-buttons__button--like'
  );
  const postType = getPostType();
  const postId = getPostId();
  if (!postType || !postId || !likeButton) return;

  updateLikeButtonState();

  // Ajouter l'événement click
  likeButton.addEventListener('click', async (e) => {
    e.preventDefault(); // Empêcher comportement par défaut

    const hasAlreadyLiked = isPostLiked(postId);
    if (hasAlreadyLiked) return showAlreadyLikedMessage();
    // Désactiver temporairement le bouton pour éviter les clics multiples
    likeButton.style.pointerEvents = 'none';

    const success = await likePost(postId);

    // Réactiver le bouton
    setTimeout(() => {
      likeButton.style.pointerEvents = 'auto';
    }, 1000);
  });
}