import { actionButton } from './action-button.mjs';

const form = document.querySelector('form');
const title = document.querySelector('#title');
const status = document.querySelector('#status');
const error = document.querySelector('#error');
const preview = actionButton('Preview draft');
const save = actionButton('Save draft', { type: 'submit' });
preview.id = 'preview';
save.id = 'save';
document.querySelector('#actions').append(preview, save);

preview.addEventListener('click', () => {
  document.querySelector('#preview-output').textContent = title.value;
});

let pending = false;
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Disabling the button does not block programmatic form submission.
  if (pending) return;
  pending = true;
  form.dataset.pending = 'true';
  form.setAttribute('aria-busy', 'true');
  save.disabled = true;
  error.textContent = '';
  status.textContent = 'Saving draft…';
  try {
    const response = await fetch('./save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: title.value }),
    });
    if (!response.ok) throw new Error('Save rejected');
    status.textContent = 'Draft saved.';
  } catch {
    status.textContent = '';
    error.textContent = 'Could not save the draft. Try again.';
    error.focus();
  } finally {
    pending = false;
    form.dataset.pending = 'false';
    form.setAttribute('aria-busy', 'false');
    save.disabled = false;
  }
});