#62 - Upvote Button v0.2

<!-- 💙 MEMBERSCRIPT #62 v0.2 💙 UPVOTE FORM -->
<script> 
  document.addEventListener('DOMContentLoaded', function() {
    const memberstack = window.$memberstackDom;
    const upvoteButtons = document.querySelectorAll('[ms-code="upvote-button"]');
    const upvoteForms = document.querySelectorAll('[ms-code="upvote-form"]');
    const upvotedValues = document.querySelectorAll('[ms-code="upvoted-value"]');
    const upvoteCounts = document.querySelectorAll('[ms-code="upvote-count"]');
    let clickTimeout; // Variable to store the timer
    let lastClickedButton = null; // Variable to store the last clicked button

    // Function to handle upvote button click
    function handleUpvoteButtonClick(event) {
      event.preventDefault();
      const button = event.currentTarget;

      // Clear the timer if the same button is clicked
      if (button === lastClickedButton) {
        clearTimeout(clickTimeout);
      }
      
      lastClickedButton = button; // Store the reference to the currently clicked button

      // Set a new timer
      clickTimeout = setTimeout(function() {
        const form = button.closest('form');
        const cmsId = button.getAttribute('data-cms-id');
        const upvotedValue = form.querySelector('[ms-code="upvoted-value"]');
        const upvoteCount = form.querySelector('[ms-code="upvote-count"]');

        if (button.classList.contains('is-true')) {
          // Remove upvote
          button.classList.remove('is-true');
          upvotedValue.value = 'false';
          upvoteCount.textContent = parseInt(upvoteCount.textContent) - 1;

          memberstack.getMemberJSON()
            .then(function(memberData) {
              if (memberData.data && memberData.data.upvotes) {
                const upvotes = memberData.data.upvotes;
                const index = upvotes.indexOf(cmsId);
                if (index !== -1) {
                  upvotes.splice(index, 1);
                  memberstack.updateMemberJSON({ json: memberData.data });
                }
              }
            })
            .catch(function(error) {
              console.error('Error retrieving/updating member data:', error);
            });
        } else {
          // Add upvote
          button.classList.add('is-true');
          upvotedValue.value = 'true';
          upvoteCount.textContent = parseInt(upvoteCount.textContent) + 1;

          memberstack.getMemberJSON()
            .then(function(memberData) {
              memberData.data = memberData.data || {};
              memberData.data.upvotes = memberData.data.upvotes || [];
              memberData.data.upvotes.push(cmsId);
              memberstack.updateMemberJSON({ json: memberData.data });
            })
            .catch(function(error) {
              console.error('Error retrieving/updating member data:', error);
            });
        }

        // Make the API call
        fetch(form.action, {
          method: form.method,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: new URLSearchParams(new FormData(form))
        })
          .then(function(response) {
            if (response.ok) {
              // Handle successful API response
              return response.json();
            } else {
              // Handle API error
              throw new Error('API Error');
            }
          })
          .then(function(data) {
            // Handle API response to update vote count
            upvoteCount.textContent = data.upvoteCount; // Replace with the actual property holding the updated vote count
          })
          .catch(function(error) {
            console.error('API Error:', error);
          });
      }, 200); // 0.2 seconds
    }

    // Attach event listeners to upvote buttons
    upvoteButtons.forEach(function(button) {
      button.addEventListener('click', handleUpvoteButtonClick);
    });

    // Check if member has upvotes on page load
    memberstack.getMemberJSON()
      .then(function(memberData) {
        if (memberData.data && memberData.data.upvotes) {
          const upvotes = memberData.data.upvotes;
          upvoteButtons.forEach(function(button) {
            const cmsId = button.getAttribute('data-cms-id');
            if (upvotes.includes(cmsId)) {
              button.classList.add('is-true');
              const form = button.closest('form');
              const upvotedValue = form.querySelector('[ms-code="upvoted-value"]');
              upvotedValue.value = 'true';
            }
          });
        }
      })
      .catch(function(error) {
        console.error('Error retrieving member data:', error);
      });
  });
</script>