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

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

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

const composedStories = composeStories(stories);

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

    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="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"
        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>
`);
  });

  it('renders WithValue story', () => {
    const Story = composedStories.WithValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="counterInput"
  >
    <span
      class="counterInput__control"
    >
      <button
        aria-label="Decrement 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-indeterminate"
        />
      </button>
      <input
        aria-label="Quantity"
        autocapitalize="off"
        autocomplete="off"
        autocorrect="off"
        class="numberField xs"
        spellcheck="false"
        type="text"
        value="3"
      />
      <button
        aria-label="Increment Quantity to 4"
        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>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <span
    class="counterInput"
  >
    <span
      class="counterInput__control counterInput__control--disabled"
    >
      <button
        aria-label="Decrement Quantity to 1"
        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=""
        spellcheck="false"
        type="text"
        value="2"
      />
      <button
        aria-label="Increment Quantity to 3"
        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>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        spellcheck="false"
        type="text"
        value="0"
      />
      <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>
`);
  });

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        spellcheck="false"
        type="text"
        value="0"
      />
      <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>
`);
  });

  it('renders WithMinMax story', () => {
    const Story = composedStories.WithMinMax;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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"
        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>
`);
  });

  it('renders SmallWidth story', () => {
    const Story = composedStories.SmallWidth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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 sm"
        spellcheck="false"
        type="text"
        value="0"
      />
      <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>
`);
  });

  it('renders MediumWidth story', () => {
    const Story = composedStories.MediumWidth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <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 md"
        spellcheck="false"
        type="text"
        value="0"
      />
      <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>
`);
  });
});