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

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

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

const composedStories = composeStories(stories);

describe('Toggle Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'EnabledState',
      'DisabledState',
      'EnabledStateDisabledVisible',
      'DisabledStateDisabledItem',
    ]);

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

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

  it('renders EnabledState story', () => {
    const Story = composedStories.EnabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="toggle toggle--ghost toggle--success"
    title="Enabled"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-visible"
    />
  </button>
</div>
`);
  });

  it('renders DisabledState story', () => {
    const Story = composedStories.DisabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="toggle toggle--ghost toggle--secondary"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-hidden"
    />
  </button>
</div>
`);
  });

  it('renders EnabledStateDisabledVisible story', () => {
    const Story = composedStories.EnabledStateDisabledVisible;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="toggle toggle--ghost toggle--success"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-visible"
    />
  </button>
</div>
`);
  });

  it('renders DisabledStateDisabledItem story', () => {
    const Story = composedStories.DisabledStateDisabledItem;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="toggle toggle--ghost toggle--secondary"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-hidden"
    />
  </button>
</div>
`);
  });
});