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

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

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

const composedStories = composeStories(stories);

describe('Tooltip Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Critical',
      'AroundText',
      'LeftPlacement',
      'RightPlacement',
      'BottomPlacement',
      'LargeContentWithJSX',
    ]);

    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
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-info"
      />
    </button>
  </div>
</div>
`);
  });

  it('renders Critical story', () => {
    const Story = composedStories.Critical;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--destructive iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-alert"
      />
    </button>
  </div>
</div>
`);
  });

  it('renders AroundText story', () => {
    const Story = composedStories.AroundText;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <div
      class="tooltip__trigger"
      role="button"
      tabindex="0"
    >
      I am text with a tooltip
    </div>
  </div>
</div>
`);
  });

  it('renders LeftPlacement story', () => {
    const Story = composedStories.LeftPlacement;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-info"
      />
    </button>
  </div>
</div>
`);
  });

  it('renders RightPlacement story', () => {
    const Story = composedStories.RightPlacement;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-info"
      />
    </button>
  </div>
</div>
`);
  });

  it('renders BottomPlacement story', () => {
    const Story = composedStories.BottomPlacement;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-info"
      />
    </button>
  </div>
</div>
`);
  });

  it('renders LargeContentWithJSX story', () => {
    const Story = composedStories.LargeContentWithJSX;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="align-items: center; display: flex; justify-content: center; min-height: 200px;"
  >
    <button
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      role="button"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-info"
      />
    </button>
  </div>
</div>
`);
  });
});