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

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

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

const composedStories = composeStories(stories);

describe('Button Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Disabled',
      'Loading',
      'Primary',
      'Secondary',
      'Action',
      'Destructive',
      'Small',
      'Medium',
      'Large',
      'IconLeft',
      'IconRight',
      'IconBoth',
      'IconLeftMedium',
      'IconRightMedium',
      'IconBothMedium',
      'IconBothLarge',
    ]);

    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="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    disabled=""
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Loading story', () => {
    const Story = composedStories.Loading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-busy="true"
    class="btn btn-primary btn-sm btn--isLoading"
    data-react-aria-pressable="true"
    disabled=""
    type="button"
  >
    <div
      aria-label="Loading"
      aria-live="polite"
      aria-valuemax="100"
      aria-valuemin="0"
      class="loader loader--sm"
      id="react-aria-_r_0_"
      role="progressbar"
    />
    <span
      class="btn--content"
    >
      Button
    </span>
    <span
      role="status"
      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
    >
      Loading
    </span>
  </button>
</div>
`);
  });

  it('renders Primary story', () => {
    const Story = composedStories.Primary;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Secondary story', () => {
    const Story = composedStories.Secondary;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-secondary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Action story', () => {
    const Story = composedStories.Action;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-action btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Destructive story', () => {
    const Story = composedStories.Destructive;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-destructive btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Small story', () => {
    const Story = composedStories.Small;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Medium story', () => {
    const Story = composedStories.Medium;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-md"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders Large story', () => {
    const Story = composedStories.Large;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-lg"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders IconLeft story', () => {
    const Story = composedStories.IconLeft;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm btn--iconLeft"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-arrow-down"
      />
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders IconRight story', () => {
    const Story = composedStories.IconRight;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm btn--iconRight"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-calendar"
      />
    </span>
  </button>
</div>
`);
  });

  it('renders IconBoth story', () => {
    const Story = composedStories.IconBoth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-sm btn--iconLeft btn--iconRight"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-comment"
      />
      Button
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--sm shp-cart-full"
      />
    </span>
  </button>
</div>
`);
  });

  it('renders IconLeftMedium story', () => {
    const Story = composedStories.IconLeftMedium;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-md btn--iconLeft"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-arrow-down"
      />
      Button
    </span>
  </button>
</div>
`);
  });

  it('renders IconRightMedium story', () => {
    const Story = composedStories.IconRightMedium;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-md btn--iconRight"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      Button
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-calendar"
      />
    </span>
  </button>
</div>
`);
  });

  it('renders IconBothMedium story', () => {
    const Story = composedStories.IconBothMedium;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-md btn--iconLeft btn--iconRight"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-comment"
      />
      Button
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-cart-full"
      />
    </span>
  </button>
</div>
`);
  });

  it('renders IconBothLarge story', () => {
    const Story = composedStories.IconBothLarge;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    class="btn btn-primary btn-lg btn--iconLeft btn--iconRight"
    data-react-aria-pressable="true"
    type="button"
  >
    <span
      class="btn--content"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-comment"
      />
      Button
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-cart-full"
      />
    </span>
  </button>
</div>
`);
  });
});