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

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

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

const composedStories = composeStories(stories);

describe('IconButton Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Disabled',
      'Loading',
      'Primary',
      'Secondary',
      'Action',
      'Destructive',
      'Ghost',
    ]);

    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="iconButton iconButton--sm iconButton--primary"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-face-positive"
    />
  </button>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="iconButton iconButton--sm iconButton--primary--disabled"
    disabled=""
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-face-positive"
    />
  </button>
</div>
`);
  });

  it('renders Loading story', () => {
    const Story = composedStories.Loading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="iconButton iconButton--sm iconButton--primary iconButton--primary--disabled iconButton--isLoading"
    disabled=""
    type="button"
  >
    <div
      aria-label="Loading"
      aria-live="polite"
      aria-valuemax="100"
      aria-valuemin="0"
      class="loader loader--md"
      id="react-aria-_r_0_"
      role="progressbar"
    />
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md"
    />
  </button>
</div>
`);
  });

  it('renders Primary story', () => {
    const Story = composedStories.Primary;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="iconButton iconButton--sm iconButton--primary"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-face-positive"
    />
  </button>
</div>
`);
  });

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

  it('renders Action story', () => {
    const Story = composedStories.Action;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="iconButton iconButton--sm iconButton--action"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-face-positive"
    />
  </button>
</div>
`);
  });

  it('renders Destructive story', () => {
    const Story = composedStories.Destructive;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="iconButton iconButton--sm iconButton--destructive"
    type="button"
  >
    <span
      aria-hidden="true"
      class="shoptet-icon icon icon--default icon--md shp-face-positive"
    />
  </button>
</div>
`);
  });

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