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

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

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

const composedStories = composeStories(stories);

describe('CodeSnippet Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'Url', 'Collapsible']);

    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
    class="code-snippet"
  >
    <pre
      class="code-snippet__content"
    >
      &lt;TextField
  as="label"
  hint="This is a hint for the text field."
  label="Text:"
  value="Text value"
/&gt;
    </pre>
    <div
      class="code-snippet__copy"
    >
      <button
        class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
        role="button"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-clipboard"
        />
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          Copy
        </div>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders Url story', () => {
    const Story = composedStories.Url;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="code-snippet"
  >
    <pre
      class="code-snippet__content code-snippet__content--url"
    >
      https://fenix.myshoptet.com/export/products.csv?patternId=36&partnerId=3&hash=0cdd73ea4224626c631226cd34f3b680ab670cea086e3232c99fa6432ae81f1f
    </pre>
    <div
      class="code-snippet__copy"
    >
      <button
        class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
        role="button"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-clipboard"
        />
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          Copy
        </div>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders Collapsible story', () => {
    const Story = composedStories.Collapsible;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="code-snippet"
  >
    <pre
      class="code-snippet__content code-snippet__content--collapsed"
    >
      &lt;div className="v2form"&gt;
  &lt;MultiSelectField
    as="label"
    getGroupOptions={function VG(){}}
    getOptionLabel={function VG(){}}
    getOptionValue={function VG(){}}
    label="Label"
    options={[
      {
        label: 'Option 1',
        value: '1'
      },
      {
        label: 'Option 2',
        value: '2'
      },
    ]}
  /&gt;
&lt;/div&gt;
    </pre>
    <div
      class="code-snippet__copy"
    >
      <button
        class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
        role="button"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-clipboard"
        />
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          Copy
        </div>
      </button>
    </div>
  </div>
</div>
`);
  });
});