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

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

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

const composedStories = composeStories(stories);

describe('ImageSelectField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'WithHint', 'WithError', 'Required', 'HiddenLabel']);

    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="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="imageSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Featured image
      </span>
    </label>
    <div
      class="imageSelect imageSelect--width-md"
    >
      <div
        aria-hidden="true"
        class="imageSelect__preview"
      >
        <span
          aria-hidden="true"
          class="v2image v2image--full"
          role="presentation"
          style="--image-aspect-ratio: 3 / 2;"
        >
          <img
            alt=""
            aria-hidden="true"
            class="v2image__img v2image__img--cover"
            style="opacity: 0; transition: none;"
          />
          <span
            aria-hidden="true"
            class="v2image__fallback"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--secondary icon--md shp-gallery"
            />
          </span>
        </span>
      </div>
      <div
        class="imageSelect__action"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          id="imageSelect_r_0_"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose image
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithHint story', () => {
    const Story = composedStories.WithHint;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="imageSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Featured image
      </span>
    </label>
    <div
      class="imageSelect imageSelect--width-md"
    >
      <div
        aria-hidden="true"
        class="imageSelect__preview"
      >
        <span
          aria-hidden="true"
          class="v2image v2image--full"
          role="presentation"
          style="--image-aspect-ratio: 3 / 2;"
        >
          <img
            alt=""
            aria-hidden="true"
            class="v2image__img v2image__img--cover"
            style="opacity: 0; transition: none;"
          />
          <span
            aria-hidden="true"
            class="v2image__fallback"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--secondary icon--md shp-gallery"
            />
          </span>
        </span>
      </div>
      <div
        class="imageSelect__action"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          id="imageSelect_r_0_"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose image
          </span>
        </button>
      </div>
    </div>
    <span
      class="v2FormField__hint"
    >
      Shown on the product card.
    </span>
  </div>
</div>
`);
  });

  it('renders WithError story', () => {
    const Story = composedStories.WithError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="imageSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Featured image
      </span>
    </label>
    <div
      class="imageSelect imageSelect--width-md"
    >
      <div
        aria-hidden="true"
        class="imageSelect__preview imageSelect__preview--error"
      >
        <span
          aria-hidden="true"
          class="v2image v2image--full"
          role="presentation"
          style="--image-aspect-ratio: 3 / 2;"
        >
          <img
            alt=""
            aria-hidden="true"
            class="v2image__img v2image__img--cover"
            style="opacity: 0; transition: none;"
          />
          <span
            aria-hidden="true"
            class="v2image__fallback"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--secondary icon--md shp-gallery"
            />
          </span>
        </span>
      </div>
      <div
        class="imageSelect__action"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          id="imageSelect_r_0_"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose image
          </span>
        </button>
      </div>
    </div>
    <span
      class="v2FormField__error"
    >
      Please choose an image.
    </span>
  </div>
</div>
`);
  });

  it('renders Required story', () => {
    const Story = composedStories.Required;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label v2FormField__label--required"
      for="imageSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Featured image
      </span>
    </label>
    <div
      class="imageSelect imageSelect--width-md"
    >
      <div
        aria-hidden="true"
        class="imageSelect__preview"
      >
        <span
          aria-hidden="true"
          class="v2image v2image--full"
          role="presentation"
          style="--image-aspect-ratio: 3 / 2;"
        >
          <img
            alt=""
            aria-hidden="true"
            class="v2image__img v2image__img--cover"
            style="opacity: 0; transition: none;"
          />
          <span
            aria-hidden="true"
            class="v2image__fallback"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--secondary icon--md shp-gallery"
            />
          </span>
        </span>
      </div>
      <div
        class="imageSelect__action"
      >
        <button
          aria-required="true"
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          id="imageSelect_r_0_"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose image
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders HiddenLabel story', () => {
    const Story = composedStories.HiddenLabel;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <div
      class="imageSelect imageSelect--width-md"
    >
      <div
        aria-hidden="true"
        class="imageSelect__preview"
      >
        <span
          aria-hidden="true"
          class="v2image v2image--full"
          role="presentation"
          style="--image-aspect-ratio: 3 / 2;"
        >
          <img
            alt=""
            aria-hidden="true"
            class="v2image__img v2image__img--cover"
            style="opacity: 0; transition: none;"
          />
          <span
            aria-hidden="true"
            class="v2image__fallback"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--secondary icon--md shp-gallery"
            />
          </span>
        </span>
      </div>
      <div
        class="imageSelect__action"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          id="imageSelect_r_0_"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose image
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });
});