import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { beforeEach, describe, expect, it } from 'vitest';
import { noop } from '../../helpers/utils';
import { initializeUi } from '../../initialize';
import { InlineMenu } from './InlineMenu';

describe('InlineMenu', () => {
  beforeEach(() => {
    initializeUi({
      showNotification: () => {
        // not implemented
        return -1;
      },
      addIndicator: () => {
        return -1;
      },
      removeIndicator: noop,
      on: noop,
      setTitle: noop,
      setSaveIndicator: noop,
    });
  });

  it('renders the component without crashing', () => {
    const { container } = render(<InlineMenu />);

    expect(container).toBeTruthy();
  });

  it('should render button', () => {
    const { container } = render(<InlineMenu />);

    const button = container.querySelector('button');
    expect(button).toBeTruthy();
  });

  it('menu should toggle on button click', async () => {
    const { container } = render(<InlineMenu />);
    const button = container.querySelector('button') as HTMLButtonElement;
    expect(
      document.querySelector('.sub-menu-container'),
    ).not.toBeInTheDocument();
    await act(async () => {
      fireEvent.click(button);
    });
    expect(document.querySelector('.sub-menu-container')).toBeInTheDocument();
    await act(async () => {
      fireEvent.click(button);
    });
    expect(
      document.querySelector('.sub-menu-container'),
    ).not.toBeInTheDocument();
  });

  it('allows an optional class to be passed in', async () => {
    const mockClass = 'test-class';
    const { container } = render(<InlineMenu className={mockClass} />);
    const button = container.querySelector('button') as HTMLButtonElement;
    await act(async () => {
      fireEvent.click(button);
    });
    const subMenu = document.querySelector('.sub-menu-container');

    expect(subMenu?.classList.contains(mockClass)).toBe(true);
  });

  it(`'accepts placement prop`, () => {
    const { container } = render(<InlineMenu placement="top" />);

    expect(container).toBeTruthy();
  });
});
