import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../vitest/render';

import * as stories from './Menu.stories';

const composedStories = composeStories(stories);

describe('Menu Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'WithButtonTrigger',
      'WithIconButtonTrigger',
      'WithIcons',
      'Disabled',
      'WithDestructiveItem',
      'WithNestedSubmenu',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders WithButtonTrigger story', () => {
    const Story = composedStories.WithButtonTrigger;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Actions
    </span>
  </button>
</div>
`);
  });

  it('renders WithIconButtonTrigger story', () => {
    const Story = composedStories.WithIconButtonTrigger;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-more"
    />
  </button>
</div>
`);
  });

  it('renders WithIcons story', () => {
    const Story = composedStories.WithIcons;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="btn btn-primary btn-sm btn--iconLeft"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-more"
      />
      Actions
    </span>
  </button>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    disabled=""
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Actions
    </span>
  </button>
</div>
`);
  });

  it('renders WithDestructiveItem story', () => {
    const Story = composedStories.WithDestructiveItem;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="btn btn-primary btn-sm btn--iconLeft"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-more"
      />
      Actions
    </span>
  </button>
</div>
`);
  });

  it('renders WithNestedSubmenu story', () => {
    const Story = composedStories.WithNestedSubmenu;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    id="react-aria-_r_0_"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Actions
    </span>
  </button>
</div>
`);
  });
});