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

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

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

const composedStories = composeStories(stories);

describe('Paragraph Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'AppearanceHeading1',
      'AppearanceHeading2',
      'AppearanceHeading3',
      'AppearanceHeading4',
      'AppearanceHeading5',
      'AppearanceBodyCopyL',
      'AppearanceBodyCopyM',
      'AppearanceBodyCopyS',
      'AppearanceStrongBodyCopyL',
      'AppearanceStrongBodyCopyM',
      'AppearanceStrongBodyCopyS',
      'Truncated',
      'Strong',
    ]);

    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>
  <p
    class="typography typography__bodyCopyM typography--left"
  >
    Paragraph text.
  </p>
</div>
`);
  });

  it('renders AppearanceHeading1 story', () => {
    const Story = composedStories.AppearanceHeading1;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__headline1 typography--left"
  >
    Looks like Heading 1
  </p>
</div>
`);
  });

  it('renders AppearanceHeading2 story', () => {
    const Story = composedStories.AppearanceHeading2;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__headline2 typography--left"
  >
    Looks like Heading 2
  </p>
</div>
`);
  });

  it('renders AppearanceHeading3 story', () => {
    const Story = composedStories.AppearanceHeading3;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__headline3 typography--left"
  >
    Looks like Heading 3
  </p>
</div>
`);
  });

  it('renders AppearanceHeading4 story', () => {
    const Story = composedStories.AppearanceHeading4;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__headline4 typography--left"
  >
    Looks like Heading 4
  </p>
</div>
`);
  });

  it('renders AppearanceHeading5 story', () => {
    const Story = composedStories.AppearanceHeading5;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__headline5 typography--left"
  >
    Looks like Heading 5
  </p>
</div>
`);
  });

  it('renders AppearanceBodyCopyL story', () => {
    const Story = composedStories.AppearanceBodyCopyL;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyL typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders AppearanceBodyCopyM story', () => {
    const Story = composedStories.AppearanceBodyCopyM;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyM typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders AppearanceBodyCopyS story', () => {
    const Story = composedStories.AppearanceBodyCopyS;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyS typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders AppearanceStrongBodyCopyL story', () => {
    const Story = composedStories.AppearanceStrongBodyCopyL;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyLB typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders AppearanceStrongBodyCopyM story', () => {
    const Story = composedStories.AppearanceStrongBodyCopyM;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyMB typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders AppearanceStrongBodyCopyS story', () => {
    const Story = composedStories.AppearanceStrongBodyCopyS;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopySB typography--left"
  >
    Lorem ipsum
  </p>
</div>
`);
  });

  it('renders Truncated story', () => {
    const Story = composedStories.Truncated;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyM typography--left typography--truncate"
  >
    This is a very long heading that should be truncated. This is a very long heading that should be truncated. This is a very long heading that should be truncated.
  </p>
</div>
`);
  });

  it('renders Strong story', () => {
    const Story = composedStories.Strong;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <p
    class="typography typography__bodyCopyM typography--left"
  >
    Product 
    <strong>
      192312931
    </strong>
  </p>
</div>
`);
  });
});