const dictionaryCheckbox = document.getElementById('dictionary-checkbox');
const quotesCheckbox = document.getElementById('quotes-checkbox');
const parameterInput = document.getElementById('parameter-input');
const responseText = document.getElementById('api-response-text');
const errorMessage = document.getElementById('api-error-message');

const words = {
  orbit: 'A path repeated around something; also a useful reminder that not every loop is a bug.',
  paper: 'A remarkably durable interface with no loading state.',
  quiet: 'The part of a layout that lets the important thing be noticed.',
  build: 'To make something small enough that you can still explain how it works.',
  night: 'Excellent conditions for noticing that one margin is three pixels off.'
};
const notes = {
  orbit: 'Repetition becomes structure when the return is intentional.',
  paper: 'Print the page once. It will reveal things the browser politely hid.',
  quiet: 'Not every empty space is waiting to be filled.',
  build: 'A boring second version is often better than a clever first one.',
  night: 'Stop fixing typography after midnight.'
};

function clearResults() {
  responseText.style.display = 'none';
  errorMessage.style.display = 'none';
}

dictionaryCheckbox.addEventListener('change', () => {
  if (dictionaryCheckbox.checked) quotesCheckbox.checked = false;
  clearResults();
});
quotesCheckbox.addEventListener('change', () => {
  if (quotesCheckbox.checked) dictionaryCheckbox.checked = false;
  clearResults();
});

document.getElementById('api-request-button').addEventListener('click', () => {
  clearResults();
  const key = parameterInput.value.trim().toLowerCase();
  if (!key || (!dictionaryCheckbox.checked && !quotesCheckbox.checked)) {
    errorMessage.style.display = 'block';
    return;
  }
  const value = dictionaryCheckbox.checked ? words[key] : notes[key];
  if (!value) {
    errorMessage.style.display = 'block';
    return;
  }
  responseText.textContent = value;
  responseText.style.display = 'block';
});