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

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

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

const composedStories = composeStories(stories);

describe('ImageSelect Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Filled',
      'Broken',
      'Disabled',
      'Loading',
      'ManyOptions',
      'CustomMinColumnWidth',
      'WithModalDescription',
      'CustomRender',
    ]);

    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="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"
        type="button"
      >
        <span
          class="btn--content"
        >
          Choose image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders Filled story', () => {
    const Story = composedStories.Filled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageSelect imageSelect--width-md"
  >
    <div
      aria-hidden="true"
      class="imageSelect__preview"
    >
      <span
        class="v2image v2image--full"
        role="presentation"
        style="--image-aspect-ratio: 3 / 2;"
      >
        <img
          alt="Phone in silver"
          class="v2image__img v2image__img--cover"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI2MCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjYwPC90ZXh0Pgo8L3N2Zz4="
          style="opacity: 0; transition: none;"
        />
        <span
          aria-hidden="true"
          class="v2image__fallback"
        />
      </span>
    </div>
    <div
      class="imageSelect__action"
    >
      <button
        class="btn btn-secondary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Change image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

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

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageSelect imageSelect--disabled imageSelect--width-md"
  >
    <div
      aria-hidden="true"
      class="imageSelect__preview"
    >
      <span
        class="v2image v2image--full"
        role="presentation"
        style="--image-aspect-ratio: 3 / 2;"
      >
        <img
          alt="Phone in black"
          class="v2image__img v2image__img--cover"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI2MCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjYwPC90ZXh0Pgo8L3N2Zz4="
          style="opacity: 0; transition: none;"
        />
        <span
          aria-hidden="true"
          class="v2image__fallback"
        />
      </span>
    </div>
    <div
      class="imageSelect__action"
    >
      <button
        class="btn btn-secondary btn-sm"
        data-react-aria-pressable="true"
        disabled=""
        type="button"
      >
        <span
          class="btn--content"
        >
          Change image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders Loading story', () => {
    const Story = composedStories.Loading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageSelect imageSelect--width-md"
  >
    <div
      aria-hidden="true"
      class="imageSelect__preview"
    >
      <span
        class="v2image v2image--full"
        role="presentation"
        style="--image-aspect-ratio: 3 / 2;"
      >
        <img
          alt="Phone in blue"
          class="v2image__img v2image__img--cover"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI2MCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjYwPC90ZXh0Pgo8L3N2Zz4="
          style="opacity: 0; transition: none;"
        />
        <span
          aria-hidden="true"
          class="v2image__fallback"
        />
      </span>
    </div>
    <div
      class="imageSelect__action"
    >
      <button
        aria-busy="true"
        class="btn btn-secondary 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"
        >
          Change image
        </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>
  </div>
</div>
`);
  });

  it('renders ManyOptions story', () => {
    const Story = composedStories.ManyOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        type="button"
      >
        <span
          class="btn--content"
        >
          Choose image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders CustomMinColumnWidth story', () => {
    const Story = composedStories.CustomMinColumnWidth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        type="button"
      >
        <span
          class="btn--content"
        >
          Choose image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders WithModalDescription story', () => {
    const Story = composedStories.WithModalDescription;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        type="button"
      >
        <span
          class="btn--content"
        >
          Choose image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders CustomRender story', () => {
    const Story = composedStories.CustomRender;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageSelect imageSelect--width-md"
  >
    <div
      aria-hidden="true"
      class="imageSelect__preview"
    >
      <div
        style="padding: 12px; background: rgb(245, 245, 245); text-align: center;"
      >
        Custom preview: 
        N/A
      </div>
    </div>
    <div
      class="imageSelect__action"
    >
      <button
        class="btn btn-secondary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Choose image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });
});