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

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

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

const composedStories = composeStories(stories);

describe('Modal Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithFixedMaxWidth',
      'WithoutFooter',
      'WithoutTitle',
      'Notification',
      'WithError',
      'WithAlert',
      'WithSuccess',
      'WithNotice',
    ]);

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

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

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithFixedMaxWidth story', () => {
    const Story = composedStories.WithFixedMaxWidth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithoutFooter story', () => {
    const Story = composedStories.WithoutFooter;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithoutTitle story', () => {
    const Story = composedStories.WithoutTitle;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders Notification story', () => {
    const Story = composedStories.Notification;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithError story', () => {
    const Story = composedStories.WithError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithAlert story', () => {
    const Story = composedStories.WithAlert;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithSuccess story', () => {
    const Story = composedStories.WithSuccess;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });

  it('renders WithNotice story', () => {
    const Story = composedStories.WithNotice;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Open modal
    </span>
  </button>
</div>
`);
  });
});