const renderResultMarkup = (query, result) =>
  `
<h1 class="display-6">${query}</h1>
<table class="table table-bordered table-striped">
<tr>
  ${result.columns.map((column) => `<th>${column}</th>`).join('')}
</tr>
${result.rows.map(
  (row) =>
    `<tr>${Object.entries(row)
      .map(([key, value]) => `<td>${value.value}</td>`)
      .join('')}</tr>`,
)}
</table>`;

const processAnalyzeResult = (data) => {
  const img = document.getElementById('imgslot');
  const queriesResult = document.getElementById('queriesResult');

  img.src = 'none.png';
  if (data.image) {
    img.src = 'data:image/jpg;base64,' + data.image;
  }

  queriesResult.innerHTML = '';
  if (data.data && data.data.response) {
    for (const [query, result] of Object.entries(data.data.response)) {
      queriesResult.innerHTML += renderResultMarkup(query, result);
    }
  } else if (data.data && data.data.error) {
    queriesResult.innerHTML = `<div class="alert alert-danger">${JSON.stringify(data.data.error)}</div>`;
  }
};

const handleFormSubmit = (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  const loaderWrapper = document.getElementById('loaderWrapper');
  loaderWrapper.classList.remove('d-none');
  fetch('/analyze', { method: 'POST', body: data })
    .then((res) => res.json())
    .then(processAnalyzeResult)
    .catch(() => {
      alert('Произошла внутренняя ошибка.');
    })
    .finally(() => {
      loaderWrapper.classList.add('d-none');
    });
};

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('uploadForm').addEventListener('submit', handleFormSubmit);
});