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

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

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

const composedStories = composeStories(stories);

describe('SystemMessage Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'Success', 'Alert', 'Error']);

    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>
  <div
    aria-atomic="true"
    aria-describedby="_r_0_"
    aria-labelledby="_r_1_"
    class="systemMessage systemMessage--notice"
    data-state="opened"
    role="status"
  >
    <div
      class="systemMessage__content"
    >
      <div
        class="systemMessage__text"
      >
        <h2
          class="typography typography__headline2 typography--left"
          id="_r_1_"
        >
          System message
        </h2>
        <div
          class="systemMessage__textDescription"
          id="_r_0_"
        >
          <p>
            This is a system message
          </p>
        </div>
      </div>
      <div
        class="systemMessage__buttons"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders Success story', () => {
    const Story = composedStories.Success;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-atomic="true"
    aria-describedby="_r_0_"
    aria-labelledby="_r_1_"
    class="systemMessage systemMessage--success"
    data-state="opened"
    role="status"
  >
    <div
      class="systemMessage__content"
    >
      <div
        class="systemMessage__text"
      >
        <h2
          class="typography typography__headline2 typography--left"
          id="_r_1_"
        >
          System message
        </h2>
        <div
          class="systemMessage__textDescription"
          id="_r_0_"
        >
          <p>
            This is a system message
          </p>
        </div>
      </div>
      <div
        class="systemMessage__buttons"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders Alert story', () => {
    const Story = composedStories.Alert;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-atomic="true"
    aria-describedby="_r_0_"
    aria-labelledby="_r_1_"
    class="systemMessage systemMessage--alert"
    data-state="opened"
    role="status"
  >
    <div
      class="systemMessage__content"
    >
      <div
        class="systemMessage__text"
      >
        <h2
          class="typography typography__headline2 typography--left"
          id="_r_1_"
        >
          System message
        </h2>
        <div
          class="systemMessage__textDescription"
          id="_r_0_"
        >
          <p>
            This is a system message
          </p>
        </div>
      </div>
      <div
        class="systemMessage__buttons"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    aria-atomic="true"
    aria-describedby="_r_0_"
    aria-labelledby="_r_1_"
    class="systemMessage systemMessage--error"
    data-state="opened"
    role="status"
  >
    <div
      class="systemMessage__content"
    >
      <div
        class="systemMessage__text"
      >
        <h2
          class="typography typography__headline2 typography--left"
          id="_r_1_"
        >
          System message
        </h2>
        <div
          class="systemMessage__textDescription"
          id="_r_0_"
        >
          <p>
            This is a system message
          </p>
        </div>
      </div>
      <div
        class="systemMessage__buttons"
      />
    </div>
  </div>
</div>
`);
  });
});