import { addFiles } from './on_files_change.js';
import { onFilesChange } from './on_files_change.js';
import { onFolderChange } from './on_folder_change.js';
import { findNode, flattenFiles, render } from './render.js';

export function initUploadTable(cfg) {
  const elements = {
    fileInputEl: cfg.fileInputEl,
    folderInputEl: cfg.folderInputEl,
    tableBodyEl: cfg.tableBodyEl,
    countEl: cfg.countEl,
  };
  const state = { nodes: [], fileMeta: new Map(), busy: false };
  elements.fileInputEl.addEventListener('change', onFilesChange(state, cfg, elements));
  elements.folderInputEl.addEventListener('change', onFolderChange(state, cfg, elements));
  elements.tableBodyEl.addEventListener('click', (event) => {
    const toggle = event.target.closest('[data-toggle]');
    if (toggle) {
      const found = findNode(state.nodes, toggle.dataset.toggle);
      if (found) found.node.expanded = !found.node.expanded;
      render(state, elements);
      return;
    }
    const remove = event.target.closest('[data-remove]');
    if (remove) {
      const found = findNode(state.nodes, remove.dataset.remove);
      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
      render(state, elements);
    }
  });

  const api = {
    pickFiles: () => elements.fileInputEl.click(),
    pickFolder: () => elements.folderInputEl.click(),
    addFiles: (files) => addFiles(state, cfg, files, elements),
    getFiles: () => flattenFiles(state.nodes),
    remove: (id) => {
      const found = findNode(state.nodes, id);
      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
      render(state, elements);
    },
    render: () => render(state, elements),
    clear: () => {
      state.nodes = [];
      state.fileMeta.clear();
      render(state, elements);
    },
    setBusy: (busy) => {
      state.busy = busy;
      elements.fileInputEl.disabled = busy;
      elements.folderInputEl.disabled = busy;
    },
  };
  api.render();
  return api;
}