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

function removeFileMeta(state, node) {
  if (node.kind === 'file') {
    state.fileKeys.delete(`${node.path}\u0000${node.file.size}`);
    return;
  }
  node.children.forEach((child) => removeFileMeta(state, child));
}

function removeNode(state, id) {
  const found = findNode(state.nodes, id);
  if (!found) return;
  removeFileMeta(state, found.node);
  found.nodes.splice(found.nodes.indexOf(found.node), 1);
}

export function initUploadTable(cfg) {
  const elements = {
    fileInputEl: cfg.fileInputEl,
    folderInputEl: cfg.folderInputEl,
    tableBodyEl: cfg.tableBodyEl,
    countEl: cfg.countEl,
  };
  const state = { nodes: [], fileKeys: new Set(), 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) {
      removeNode(state, remove.dataset.remove);
      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) => {
      removeNode(state, id);
      render(state, elements);
    },
    render: () => render(state, elements),
    clear: () => {
      state.nodes = [];
      state.fileKeys.clear();
      render(state, elements);
    },
  };
  api.render();
  return api;
}