function createCloseButton() {
  const container = document.createElement('div');
  container.style.marginBottom = '1em';
  container.style.display = 'flex';
  container.style.justifyContent = 'flex-end';

  const closeButton = document.createElement('a');
  closeButton.classList.add('btn');
  closeButton.classList.add('btn--close');
  closeButton.href = '#';
  closeButton.innerText = 'x close';
  closeButton.style.marginLeft = 'auto';
  closeButton.addEventListener('click', (e) => {
    e.preventDefault();
    container.parentElement.remove();
  });

  container.append(closeButton);

  return container;
}

document.querySelectorAll('[data-delete]').forEach((el) => {
  el.addEventListener('click', (e) => {
    if (confirm('Are you sure? This cannot be undone.')) {
      let postId = e.target.dataset.delete;
      fetch(`/posts/${postId}`, {
        method: 'DELETE',
      }).then((r) => {
        r.json().then((data) => {
          if (data.success) {
            window.location = '/';
          }
        });
      });
    }
  });
});

const previewButton = document.querySelector('[data-preview]');
if (previewButton) {
  previewButton.addEventListener('click', (e) => {
    e.preventDefault();

    const currentPreview = document.querySelector('#preview');
    if (currentPreview) {
      currentPreview.remove();
    }

    const form = document.querySelector('#post-form');
    const textarea = form.querySelector('[name=body]');
    const preview = document.createElement('div');
    const content = document.createElement('div');
    preview.id = 'preview';

    if (textarea.value.trim().length === 0) {
      return;
    }

    const closeButton = createCloseButton();

    content.innerHTML = textarea.value;
    preview.append(closeButton);
    preview.append(content);
    form.append(preview);
  });
}