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

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

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

const composedStories = composeStories(stories);

describe('FileField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Multiple',
      'MaxFiles',
      'Accept',
      'Error',
      'MultipleErrors',
      'Tooltip',
      'Justify',
      'Medium',
      'Large',
      'Disabled',
      'WithPreviewSrc',
    ]);

    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>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Multiple story', () => {
    const Story = composedStories.Multiple;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          multiple=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders MaxFiles story', () => {
    const Story = composedStories.MaxFiles;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          multiple=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
          <button
            class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
            role="button"
            tabindex="0"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-info"
            />
          </button>
        </div>
      </div>
      <span
        class="v2FormField__hint"
      >
        Max 3 files
      </span>
    </div>
  </label>
</div>
`);
  });

  it('renders Accept story', () => {
    const Story = composedStories.Accept;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          accept=".pdf"
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
          <button
            class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
            role="button"
            tabindex="0"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-info"
            />
          </button>
        </div>
      </div>
      <span
        class="v2FormField__hint"
      >
        Only .pdf files
      </span>
    </div>
  </label>
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
      <span
        class="v2FormField__error"
      >
        Required
      </span>
    </div>
  </label>
</div>
`);
  });

  it('renders MultipleErrors story', () => {
    const Story = composedStories.MultipleErrors;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          multiple=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Tooltip story', () => {
    const Story = composedStories.Tooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
          <button
            class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
            role="button"
            tabindex="0"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-info"
            />
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Justify story', () => {
    const Story = composedStories.Justify;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label v2FormField__label--justify"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Medium story', () => {
    const Story = composedStories.Medium;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Large story', () => {
    const Story = composedStories.Large;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        File:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="File:"
          disabled=""
          hidden=""
          type="file"
        />
        <div
          class="fileField__button"
        >
          <button
            class="btn btn-primary btn-sm"
            data-react-aria-pressable="true"
            disabled=""
            id="_r_0_"
            type="button"
          >
            <span
              class="btn--content"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });

  it('renders WithPreviewSrc story', () => {
    const Story = composedStories.WithPreviewSrc;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
    for="_r_0_"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Image:
      </span>
    </span>
    <div
      class="v2FormField__file"
    >
      <div
        class="fileField"
      >
        <input
          aria-label="Image:"
          hidden=""
          type="file"
        />
        <div>
          <div
            class="fileField__item"
          >
            <div
              class="fileField__itemButtonContainer"
            >
              <button
                class="fileField__preview md"
                type="button"
              >
                <span
                  class="v2image v2image--md"
                  role="presentation"
                  style="--image-aspect-ratio: 4 / 3;"
                >
                  <img
                    alt="photo.jpg"
                    class="v2image__img v2image__img--contain"
                    src="https://picsum.photos/seed/shoptet/400/300"
                    style="opacity: 0; transition: none;"
                  />
                  <span
                    aria-hidden="true"
                    class="v2image__fallback"
                  />
                </span>
              </button>
            </div>
            <button
              class="iconButton iconButton--sm iconButton--destructive iconButton--ghost"
              type="button"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-delete"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
  </label>
</div>
`);
  });
});