const fs = require('node:fs');
const path = require('node:path');
const vm = require('node:vm');
const test = require('node:test');
const assert = require('node:assert/strict');

test('pending toast is shown after a refresh and cleared from storage', () => {
  const toastNodes = [];
  const bodyNode = { textContent: '' };
  const titleNode = { textContent: '' };
  const timeNode = { textContent: '' };
  const iconNode = { className: '' };
  const closeNode = { className: '' };
  const headerNode = { className: '', querySelector(selector) {
    if (selector === '.toast-header i') {
      return iconNode;
    }
    if (selector === '.toast-header .me-auto') {
      return titleNode;
    }
    if (selector === '.toast-time') {
      return timeNode;
    }
    if (selector === '.toast-header .btn-close') {
      return closeNode;
    }
    return null;
  } };

  function createToastNode() {
    const attributes = {};
    return {
      className: '',
      id: '',
      attributes: attributes,
      classList: {
        add() {},
        remove() {}
      },
      setAttribute(name, value) {
        attributes[name] = String(value);
      },
      getAttribute(name) {
        return attributes[name];
      },
      querySelector(selector) {
        if (selector === '.toast-header') {
          return headerNode;
        }
        if (selector === '.toast-body') {
          return bodyNode;
        }
        if (selector === '.toast-header i') {
          return iconNode;
        }
        if (selector === '.toast-header .me-auto') {
          return titleNode;
        }
        if (selector === '.toast-time') {
          return timeNode;
        }
        if (selector === '.toast-header .btn-close') {
          return closeNode;
        }
        return null;
      },
      addEventListener() {},
      innerHTML: ''
    };
  }

  const container = {
    appendChild(node) {
      toastNodes.push(node);
      return node;
    }
  };

  const storage = {
    value: JSON.stringify({ message: 'Password updated.', variant: 'success' }),
    getItem(key) {
      return key === 'pulse:pending-toast' ? this.value : null;
    },
    setItem() {},
    removeItem(key) {
      if (key === 'pulse:pending-toast') {
        this.value = null;
      }
    }
  };

  const sandbox = {
    document: {
      getElementById(id) {
        if (id === 'app-toast') {
          return null;
        }
        if (id === 'app-toast-container') {
          return container;
        }
        return null;
      },
      createElement(tagName) {
        assert.equal(tagName, 'div');
        return createToastNode();
      }
    },
    sessionStorage: storage,
    bootstrap: {
      Toast: {
        getOrCreateInstance(node) {
          return {
            show() {
              node.shown = true;
            },
            hide() {}
          };
        }
      }
    },
    history: { replaceState() {} },
    location: { href: 'http://localhost/account' },
    URL,
    Date,
    console,
    setTimeout,
    clearTimeout,
    module: { exports: {} },
    exports: {}
  };
  sandbox.window = sandbox;

  const scriptPath = path.join(__dirname, '..', 'src', 'web', 'public', 'js', 'toast.js');
  const script = fs.readFileSync(scriptPath, 'utf8');
  vm.runInNewContext(script, sandbox, { filename: scriptPath });

  assert.equal(storage.value, null);
  assert.equal(toastNodes.length, 1);
  assert.equal(bodyNode.textContent, 'Password updated.');
  assert.equal(toastNodes[0].attributes['data-toast-variant'], 'success');
  assert.equal(toastNodes[0].shown, true);
  assert.match(titleNode.textContent, /Success/i);
});