import VouchMenu from '$lib/components/VouchMenu.svelte';
import { render } from '@testing-library/svelte';

const firstItemClick = jest.fn();
const secondItemClick = jest.fn();
const subItemClick = jest.fn();

const items = [
  {
    id: 'Item 1',
    label: 'Item 1',
    onClick: firstItemClick
  },
  {
    id: 'Item 2',
    label: 'Item 2',
    subItems: [{
      id: 'Subitem',
      label: 'Subitem',
      onClick: subItemClick
    }],
    onClick: secondItemClick
  },
];

describe('DS Components - VouchMenu', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders successfully', () => {
    expect(() => {
      const { container } = render(VouchMenu, { props: { items } });

      expect(container).toMatchSnapshot();
    }).not.toThrow();
  });

  it('renders items and subitems', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items } });
    await getByTestId('vouch-menu-button').click();
    expect(getByText('Item 1')).toBeVisible();
    expect(getByText('Item 2')).toBeVisible();
    await getByText('Item 2').click();
    expect(getByText('Subitem')).toBeVisible();
  })

  it('renders active item indicator when active items are passed', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items, activeitems: ['Item 1'] } });
    await getByTestId('vouch-menu-button').click();
    expect(getByText('Item 1')).toBeVisible();
    expect(getByTestId('active-item-indicator-Item 1')).toBeVisible();
  })

  it('ontoggle fires when open state changes and on mount', async () => {
    const onToggle = jest.fn();
    const { getByTestId } = render(VouchMenu, { props: { ontoggle: onToggle } });
    expect(onToggle).toHaveBeenLastCalledWith(false);
    await getByTestId('vouch-menu-button').click();
    expect(onToggle).toHaveBeenLastCalledWith(true);
    expect(onToggle).toHaveBeenCalledTimes(2)
  })

  it('opens on click', async () => {
    const { queryByTestId, getByTestId } = render(VouchMenu);
    expect(queryByTestId('vouch-menu-popout')).not.toBeVisible();
    await getByTestId('vouch-menu-button').click();
    expect(getByTestId('vouch-menu-popout')).toBeVisible();
  })

  it('fires onclick of items', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items } });
    await getByTestId('vouch-menu-button').click();
    await getByText('Item 1').click();
    expect(firstItemClick).toHaveBeenCalledTimes(1)
  })

  it('fires onclick of items', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items } });
    await getByTestId('vouch-menu-button').click();
    await getByText('Item 1').click();
    expect(firstItemClick).toHaveBeenCalledTimes(1)
  })

  it('shows submenu when appropriate', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items } });
    await getByTestId('vouch-menu-button').click();
    expect(getByTestId('vouch-menu-secondary')).not.toBeVisible();
    await getByText('Item 2').click();
    expect(getByTestId('vouch-menu-secondary')).toBeVisible();
  })

  it('hides submenu when pressing back button', async () => {
    const { getByText, getByTestId } = render(VouchMenu, { props: { items } });
    await getByTestId('vouch-menu-button').click();
    expect(getByTestId('vouch-menu-secondary')).not.toBeVisible();
    await getByText('Item 2').click();
    expect(getByTestId('vouch-menu-secondary')).toBeVisible();
    await getByTestId('vouch-menu-back-button').click();
    expect(getByTestId('vouch-menu-secondary')).not.toBeVisible();
  })
});