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

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

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

const composedStories = composeStories(stories);

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

    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
    class="stack stack--alignItemsStretch stack--flexDirectionColumn stack--gap stack--justifyContentStart stack--noPadding stack--noWrap"
  >
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
      <div>
        Line 
        5
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Vertical story', () => {
    const Story = composedStories.Vertical;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="stack stack--alignItemsStretch stack--flexDirectionColumn stack--gap stack--justifyContentStart stack--noPadding stack--noWrap"
  >
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
      <div>
        Line 
        5
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders FullScreenCentered story', () => {
    const Story = composedStories.FullScreenCentered;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <style>
    #story--components-flex--screen-centered-inner {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
        }
  </style>
  <div
    class="stack stack--alignItemsCenter stack--flexDirectionColumn stack--gap stack--grow stack--justifyContentCenter stack--noPadding stack--noWrap"
  >
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
      <div>
        Line 
        5
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
      <div>
        Line 
        4
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
      <div>
        Line 
        3
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
      <div>
        Line 
        2
      </div>
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      <div>
        Line 
        1
      </div>
    </div>
  </div>
</div>
`);
  });
});