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

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

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

const composedStories = composeStories(stories);

describe('Popover Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithPadding',
      'Elevation',
      'TopPlacement',
      'WithInteractiveContent',
      'ControlledAndOpenByDefault',
    ]);

    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="display: flex; justify-content: center; padding: 80px;"
  >
    <button
      aria-expanded="false"
      class="btn btn-primary btn-sm"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        class="btn--content"
      >
        Open popover
      </span>
    </button>
  </div>
</div>
`);
  });

  it('renders WithPadding story', () => {
    const Story = composedStories.WithPadding;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; justify-content: center; padding: 80px;"
  >
    <button
      aria-expanded="false"
      class="btn btn-primary btn-sm"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        class="btn--content"
      >
        Open popover
      </span>
    </button>
  </div>
</div>
`);
  });

  it('renders Elevation story', () => {
    const Story = composedStories.Elevation;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; justify-content: center; padding: 80px;"
  >
    <div
      class="stack stack--alignItemsStretch stack--flexDirectionRow stack--gapXl stack--justifyContentStart stack--noPadding stack--noWrap"
    >
      <button
        aria-expanded="false"
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        tabindex="0"
        type="button"
      >
        <span
          class="btn--content"
        >
          Low
        </span>
      </button>
      <button
        aria-expanded="false"
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        tabindex="0"
        type="button"
      >
        <span
          class="btn--content"
        >
          Medium
        </span>
      </button>
      <button
        aria-expanded="false"
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        tabindex="0"
        type="button"
      >
        <span
          class="btn--content"
        >
          High
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders TopPlacement story', () => {
    const Story = composedStories.TopPlacement;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; justify-content: center; padding: 80px;"
  >
    <button
      aria-expanded="false"
      class="btn btn-primary btn-sm"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        class="btn--content"
      >
        Open popover
      </span>
    </button>
  </div>
</div>
`);
  });

  it('renders WithInteractiveContent story', () => {
    const Story = composedStories.WithInteractiveContent;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; justify-content: center; padding: 80px;"
  >
    <button
      aria-expanded="false"
      class="btn btn-primary btn-sm"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        class="btn--content"
      >
        Options
      </span>
    </button>
  </div>
</div>
`);
  });

  it('renders ControlledAndOpenByDefault story', () => {
    const Story = composedStories.ControlledAndOpenByDefault;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; justify-content: center; padding: 80px;"
  >
    <button
      aria-controls="react-aria-_r_0_"
      aria-expanded="true"
      class="btn btn-primary btn-sm"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        class="btn--content"
      >
        Open popover
      </span>
    </button>
  </div>
</div>
`);
  });
});