import { esc } from './esc.js';
import { fs } from './fs.js';

export function render(state, elements) {
  if (!state.files.length) {
    elements.tableBodyEl.innerHTML = '<tr><td colspan="3">Нет выбранных файлов</td></tr>';
  } else {
    elements.tableBodyEl.innerHTML = state.files.map((file, index) => {
      const over = state.overNames.has(file.name);
      const status = over ? 'не учитывается (лимит)' : 'готов';
      return `<tr id="row-${index}"><td>${esc(file.name)}</td>`
        + `<td>${fs(file.size)}</td><td id="st-${index}">${status}</td></tr>`;
    }).join('');
  }
  const included = state.files.filter((file) => !state.overNames.has(file.name));
  const overCount = state.files.length - included.length;
  const size = included.reduce((total, file) => total + file.size, 0);
  elements.countEl.textContent = `${included.length} учитываются`
    + (overCount ? ` + ${overCount} свыше лимита` : '')
    + ` · ${fs(size)}`;
}