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

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

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

const composedStories = composeStories(stories);

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

    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="image-crop"
    style="height: 320px; width: 520px;"
  >
    <div
      class="advanced-cropper advanced-cropper-wrapper"
    >
      <div
        class="advanced-cropper-wrapper__fade advanced-cropper-fade"
      >
        <div
          class="advanced-cropper-boundary advanced-cropper__boundary"
        >
          <div
            class="advanced-cropper-boundary__stretcher"
          />
          <div
            class="advanced-cropper-boundary__content"
          >
            <div
              class="advanced-cropper__background-wrapper"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders RoundStencil story', () => {
    const Story = composedStories.RoundStencil;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="image-crop"
    style="height: 320px; width: 520px;"
  >
    <div
      class="advanced-cropper advanced-cropper-wrapper"
    >
      <div
        class="advanced-cropper-wrapper__fade advanced-cropper-fade"
      >
        <div
          class="advanced-cropper-boundary advanced-cropper__boundary"
        >
          <div
            class="advanced-cropper-boundary__stretcher"
          />
          <div
            class="advanced-cropper-boundary__content"
          >
            <div
              class="advanced-cropper__background-wrapper"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders FreeAspect story', () => {
    const Story = composedStories.FreeAspect;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="image-crop"
    style="height: 320px; width: 520px;"
  >
    <div
      class="advanced-cropper advanced-cropper-wrapper"
    >
      <div
        class="advanced-cropper-wrapper__fade advanced-cropper-fade"
      >
        <div
          class="advanced-cropper-boundary advanced-cropper__boundary"
        >
          <div
            class="advanced-cropper-boundary__stretcher"
          />
          <div
            class="advanced-cropper-boundary__content"
          >
            <div
              class="advanced-cropper__background-wrapper"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
            <canvas
              class="advanced-cropper-canvas"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders SaveCroppedImage story', () => {
    const Story = composedStories.SaveCroppedImage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="stack stack--alignItemsStretch stack--flexDirectionColumn stack--gapMd stack--justifyContentStart stack--noPadding stack--noWrap"
  >
    <div
      class="image-crop"
      style="height: 320px; width: 520px;"
    >
      <div
        class="advanced-cropper advanced-cropper-wrapper"
      >
        <div
          class="advanced-cropper-wrapper__fade advanced-cropper-fade"
        >
          <div
            class="advanced-cropper-boundary advanced-cropper__boundary"
          >
            <div
              class="advanced-cropper-boundary__stretcher"
            />
            <div
              class="advanced-cropper-boundary__content"
            >
              <div
                class="advanced-cropper__background-wrapper"
              />
              <canvas
                class="advanced-cropper-canvas"
              />
              <canvas
                class="advanced-cropper-canvas"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="stack stack--alignItemsCenter stack--flexDirectionRow stack--gapSm stack--justifyContentStart stack--noPadding stack--wrap"
    >
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Save cropped image
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });
});