/**
 * fileSection component.
 *
 * A single reusable component parametrized by `dir` and `canShare`. Both the
 * Inbox and Outbox on the page are the same component instance with different
 * props, replacing the previously copy-pasted <section> blocks.
 *
 * Usage:
 *   <section x-data="fileSection('inbox', { canShare: true })"> ... </section>
 */
(function () {
  function register() {
    Alpine.data('fileSection', (dir, opts = {}) => ({
      dir,
      canShare: opts.canShare ?? false,
      dragover: false,

      get files() {
        return Alpine.store('files').files[dir];
      },
      get count() {
        return this.files.length;
      },
      get title() {
        return Alpine.store('locale').t(dir === 'inbox' ? 'inbox' : 'outbox');
      },
      get icon() {
        return dir === 'inbox' ? window.Icons.inbox : window.Icons.outbox;
      },

      async onSelect(e) {
        await Alpine.store('files').upload(this.dir, e.target.files);
        e.target.value = '';
      },

      async onDrop(e) {
        await Alpine.store('files').upload(this.dir, e.dataTransfer.files);
      },
    }));
  }

  if (window.Alpine) register();
  else document.addEventListener('alpine:init', register);
})();