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

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

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

const composedStories = composeStories(stories);

describe('PasswordInput Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'WithValue', 'WithPlaceholder', 'Error', 'Warning', 'Disabled']);

    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>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-label="Password"
        class="passwordField md"
        placeholder="Enter password"
        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>
`);
  });

  it('renders WithValue story', () => {
    const Story = composedStories.WithValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-label="Password"
        class="passwordField md"
        placeholder="Enter password"
        type="password"
        value="secretPassword123"
      />
    </span>
    <button
      aria-label="Show password"
      aria-pressed="false"
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-preview-off"
      />
    </button>
  </span>
</div>
`);
  });

  it('renders WithPlaceholder story', () => {
    const Story = composedStories.WithPlaceholder;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-label="Password"
        class="passwordField md"
        placeholder="Create a strong password"
        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>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-invalid="true"
        aria-label="Password"
        class="passwordField md error-field"
        placeholder="Enter password"
        type="password"
        value="123"
      />
    </span>
    <button
      aria-label="Show password"
      aria-pressed="false"
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-preview-off"
      />
    </button>
  </span>
</div>
`);
  });

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-label="Password"
        class="passwordField md warning-field"
        placeholder="Enter password"
        type="password"
        value="weakpass"
      />
    </span>
    <button
      aria-label="Show password"
      aria-pressed="false"
      class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
      data-react-aria-pressable="true"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="shoptet-icon icon icon--default icon--md shp-preview-off"
      />
    </button>
  </span>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="passwordField__control"
  >
    <span
      class="v2FormField__inputInner"
    >
      <input
        aria-label="Password"
        class="passwordField md"
        disabled=""
        placeholder="Enter password"
        type="password"
        value="disabledPassword"
      />
    </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>
`);
  });
});