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

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

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

const composedStories = composeStories(stories);

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

    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_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control"
        >
          <button
            aria-label="Decrement Quantity: to -1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs"
            id="_r_0_"
            spellcheck="false"
            type="text"
            value=""
          />
          <button
            aria-label="Increment Quantity: to 1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </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_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control counterInput__control--disabled"
        >
          <button
            aria-label="Decrement Quantity: to 2"
            class="iconButton iconButton--sm iconButton--secondary--disabled iconButton--ghost"
            disabled=""
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs"
            disabled=""
            id="_r_0_"
            spellcheck="false"
            type="text"
            value="3"
          />
          <button
            aria-label="Increment Quantity: to 4"
            class="iconButton iconButton--sm iconButton--secondary--disabled iconButton--ghost"
            disabled=""
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </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_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control counterInput__control--error"
        >
          <button
            aria-label="Decrement Quantity: to -1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-invalid="true"
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs error-field"
            id="_r_0_"
            spellcheck="false"
            type="text"
            value=""
          />
          <button
            aria-label="Increment Quantity: to 1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </span>
      <span
        class="v2FormField__error"
      >
        Value must be at least 1
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control counterInput__control--warning"
        >
          <button
            aria-label="Decrement Quantity: to -1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs warning-field"
            id="_r_0_"
            spellcheck="false"
            type="text"
            value=""
          />
          <button
            aria-label="Increment Quantity: to 1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </span>
      <span
        class="v2FormField__warning"
      >
        Value is approaching the maximum
      </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_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control"
        >
          <button
            aria-label="Decrement Quantity: to -1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs"
            id="_r_0_"
            spellcheck="false"
            type="text"
            value=""
          />
          <button
            aria-label="Increment Quantity: to 1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </span>
      <span
        class="v2FormField__hint"
      >
        Enter the number of items.
      </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_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control"
        >
          <button
            aria-label="Decrement Quantity: to -1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            aria-required="true"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs"
            id="_r_0_"
            required=""
            spellcheck="false"
            type="text"
            value=""
          />
          <button
            aria-label="Increment Quantity: to 1"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders WithMinMax story', () => {
    const Story = composedStories.WithMinMax;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Quantity:
      </span>
    </label>
    <div
      class="v2FormField__input"
    >
      <span
        class="counterInput"
      >
        <span
          class="counterInput__control"
        >
          <button
            aria-label="Decrement Quantity: to 0"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-indeterminate"
            />
          </button>
          <input
            aria-label="Quantity:"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            class="numberField xs"
            id="_r_0_"
            spellcheck="false"
            type="text"
            value="1"
          />
          <button
            aria-label="Increment Quantity: to 2"
            class="iconButton iconButton--sm iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-plus-small"
            />
          </button>
        </span>
        <div
          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >
          <span
            aria-live="assertive"
          />
        </div>
      </span>
    </div>
  </div>
</div>
`);
  });
});