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

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

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

const composedStories = composeStories(stories);

describe('PasswordField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Disabled',
      'Loading',
      'Error',
      'Hint',
      'Justify',
      'Required',
      'StrengthIndicator',
    ]);

    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="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            disabled=""
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Loading story', () => {
    const Story = composedStories.Loading;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            id="_r_0_"
            type="password"
            value=""
          />
          <div
            aria-label="Loading"
            aria-live="polite"
            aria-valuemax="100"
            aria-valuemin="0"
            class="loader loader--sm"
            id="react-aria-_r_5_"
            role="progressbar"
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-errormessage="_r_5_"
            aria-invalid="true"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md error-field"
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
      <span
        class="v2FormField__error"
        id="_r_5_"
      >
        Min 8 characters
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Hint story', () => {
    const Story = composedStories.Hint;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
      <span
        class="v2FormField__hint"
        id="_r_4_"
      >
        Min 8 characters
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Justify story', () => {
    const Story = composedStories.Justify;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label v2FormField__label--justify"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
  </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="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            aria-required="true"
            class="passwordField md"
            id="_r_0_"
            required=""
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders StrengthIndicator story', () => {
    const Story = composedStories.StrengthIndicator;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
      id="_r_1_"
    >
      <span
        class="v2FormField__labelText"
      >
        Password:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="passwordField__control"
      >
        <span
          class="v2FormField__inputInner"
        >
          <input
            aria-describedby="_r_2_ _r_3_ _r_4_"
            aria-label="Password:"
            aria-labelledby="_r_1_"
            class="passwordField md"
            id="_r_0_"
            type="password"
            value=""
          />
        </span>
        <button
          aria-label="Show password"
          aria-pressed="false"
          class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
          data-react-aria-pressable="true"
          disabled=""
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-preview-off"
          />
        </button>
      </span>
    </div>
    <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>
`);
  });
});