import { beforeEach, describe, expect, it } from 'vitest';

import { componentName } from './consts';
import { Tinyflow } from './Tinyflow';

describe('tinyflow theme', () => {
  beforeEach(() => {
    document.body.innerHTML = '';
  });

  it('should use light theme by default', () => {
    const container = document.createElement('div');
    document.body.append(container);

    const tinyflow = new Tinyflow({
      element: container,
    });

    const tinyflowEl = container.querySelector(componentName);
    expect(tinyflowEl).toBeTruthy();
    expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);

    tinyflow.destroy();
  });

  it('should toggle theme class without remount', () => {
    const container = document.createElement('div');
    document.body.append(container);

    const tinyflow = new Tinyflow({
      element: container,
      theme: 'dark',
    });

    const tinyflowEl = container.querySelector(componentName);
    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(true);

    tinyflow.setTheme('light');

    expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);

    tinyflow.destroy();
  });

  it('should keep theme when data is reset', () => {
    const container = document.createElement('div');
    document.body.append(container);

    const tinyflow = new Tinyflow({
      element: container,
      theme: 'dark',
    });

    const firstRenderEl = container.querySelector(componentName);
    tinyflow.setData({
      nodes: [],
      edges: [],
    });
    const secondRenderEl = container.querySelector(componentName);

    expect(firstRenderEl).toBeTruthy();
    expect(secondRenderEl).toBeTruthy();
    expect(secondRenderEl).not.toBe(firstRenderEl);
    expect(secondRenderEl?.classList.contains('tf-theme-dark')).toBe(true);

    tinyflow.destroy();
  });
});