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

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

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

const composedStories = composeStories(stories);

describe('FileInput Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Multiple',
      'WithPreloadedFiles',
      'WithFileTypes',
      'DisabledState',
      'WithValidationStates',
      'WithTooltipAndLabels',
    ]);

    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
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        hidden=""
        type="file"
      />
      <div
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose file
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Multiple story', () => {
    const Story = composedStories.Multiple;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        hidden=""
        multiple=""
        type="file"
      />
      <div
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose files
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithPreloadedFiles story', () => {
    const Story = composedStories.WithPreloadedFiles;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        hidden=""
        multiple=""
        type="file"
      />
      <div
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            document.pdf
          </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
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            image.jpg
          </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
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            spreadsheet.xlsx
          </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
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Add more files
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithFileTypes story', () => {
    const Story = composedStories.WithFileTypes;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        accept=".pdf,.doc,.docx"
        hidden=""
        type="file"
      />
      <div
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose document
          </span>
        </button>
      </div>
    </div>
    <div
      style="margin-top: 8px; font-size: 12px; color: rgb(102, 102, 102);"
    >
      Accepts: .pdf, .doc, .docx files only
    </div>
  </div>
</div>
`);
  });

  it('renders DisabledState story', () => {
    const Story = composedStories.DisabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        disabled=""
        hidden=""
        multiple=""
        type="file"
      />
      <div
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            disabled=""
            type="button"
          >
            locked-document.pdf
          </button>
        </div>
        <button
          class="iconButton iconButton--sm iconButton--destructive--disabled iconButton--ghost"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-delete"
          />
        </button>
      </div>
      <div
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            disabled=""
            type="button"
          >
            readonly-file.txt
          </button>
        </div>
        <button
          class="iconButton iconButton--sm iconButton--destructive--disabled iconButton--ghost"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-delete"
          />
        </button>
      </div>
      <div
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            class="btn--content"
          >
            Choose files
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithValidationStates story', () => {
    const Story = composedStories.WithValidationStates;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        hidden=""
        multiple=""
        type="file"
      />
      <div
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            valid-file.pdf
          </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
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md error-field"
            type="button"
          >
            invalid-file.exe
          </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
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md warning-field"
            type="button"
          >
            warning-file.txt
          </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
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Add more files
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithTooltipAndLabels story', () => {
    const Story = composedStories.WithTooltipAndLabels;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 400px;"
  >
    <div
      class="fileField"
    >
      <input
        hidden=""
        multiple=""
        type="file"
      />
      <div
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            report.pdf
          </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>
        <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
        class="fileField__item"
      >
        <div
          class="fileField__itemButtonContainer"
        >
          <button
            class="fileField__itemButton textField md"
            type="button"
          >
            data.csv
          </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>
        <span
          class="v2FormField__labelAfter"
        >
          Required
        </span>
      </div>
      <div
        class="fileField__button"
      >
        <button
          class="btn btn-primary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Add files
          </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>
</div>
`);
  });
});