import { addFiles } from './on_files_change.js';
import { onFilesChange } from './on_files_change.js';
import { onFolderChange } from './on_folder_change.js';
import { render } from './render.js';
import { setStatus } from './set_status.js';

export function initUploadTable(cfg) {
  const elements = {
    fileInputEl: cfg.fileInputEl,
    folderInputEl: cfg.folderInputEl,
    tableBodyEl: cfg.tableBodyEl,
    countEl: cfg.countEl,
    uploadBtnEl: cfg.uploadBtnEl,
  };
  const state = { files: [], fileMeta: new Map(), overNames: new Set(), busy: false };
  elements.fileInputEl.addEventListener('change', onFilesChange(state, cfg, elements));
  elements.folderInputEl.addEventListener('change', onFolderChange(state, cfg, elements));

  const api = {
    pickFiles: () => elements.fileInputEl.click(),
    pickFolder: () => elements.folderInputEl.click(),
    addFiles: (files) => addFiles(state, cfg, files, elements),
    getFiles: () => state.files
      .filter((file) => !state.overNames.has(file.name))
      .map((file) => ({ path: file.name, name: file.name, size: file.size, file })),
    getOverNames: () => new Set(state.overNames),
    setStatus: (path, html) => setStatus(path, html, state, elements),
    render: () => render(state, elements),
    clear: () => {
      state.files = [];
      state.fileMeta.clear();
      state.overNames.clear();
      render(state, elements);
    },
    setBusy: (busy) => {
      state.busy = busy;
      elements.fileInputEl.disabled = busy;
      elements.folderInputEl.disabled = busy;
      elements.uploadBtnEl.disabled = busy || api.getFiles().length === 0;
    },
  };
  api.render();
  return api;
}