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

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

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

const composedStories = composeStories(stories);

describe('NumberInput Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithDifferentLocale',
      'WithDefaultValue',
      'WithPlaceholder',
      'PositiveNumber',
      'NegativeNumber',
      'ZeroValue',
      'Error',
      'Warning',
      'Disabled',
      'ReadOnly',
      'Required',
      'WithName',
      'Composed',
    ]);

    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>
  <input
    aria-label="Number input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value=""
  />
</div>
`);
  });

  it('renders WithDifferentLocale story', () => {
    const Story = composedStories.WithDifferentLocale;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div>
    <div
      style="margin-bottom: 10px;"
    >
      <label>
        Locale:
         
        <select>
          <option
            value="cs-CZ"
          >
            Czech (cs-CZ) - comma
          </option>
          <option
            value="en-US"
          >
            English (en-US) - dot
          </option>
          <option
            value="de-DE"
          >
            German (de-DE) - comma
          </option>
          <option
            value="sk-SK"
          >
            Slovak (sk-SK) - comma
          </option>
          <option
            value="hu-HU"
          >
            Hungarian (hu-HU) - comma
          </option>
          <option
            value="pl-PL"
          >
            Polish (pl-PL) - comma
          </option>
          <option
            value="ro-RO"
          >
            Romanian (ro-RO) - comma
          </option>
          <option
            value="vi-VN"
          >
            Vietnamese (vi-VN) - comma
          </option>
        </select>
      </label>
    </div>
    <input
      aria-label="Number input (locale-aware)"
      autocapitalize="off"
      autocomplete="off"
      autocorrect="off"
      class="numberField md"
      placeholder="Enter a number"
      spellcheck="false"
      type="text"
      value=""
    />
    <div
      style="margin-top: 10px; font-size: 14px; color: rgb(102, 102, 102);"
    >
      Current value: 
      null
    </div>
    <div
      style="font-size: 12px; color: rgb(136, 136, 136);"
    >
      Expected decimal separator for 
      cs-CZ
      :
       
      comma (,)
    </div>
  </div>
</div>
`);
  });

  it('renders WithDefaultValue story', () => {
    const Story = composedStories.WithDefaultValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Number input with default value"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="42"
  />
</div>
`);
  });

  it('renders WithPlaceholder story', () => {
    const Story = composedStories.WithPlaceholder;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Age input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter your age"
    spellcheck="false"
    type="text"
    value=""
  />
</div>
`);
  });

  it('renders PositiveNumber story', () => {
    const Story = composedStories.PositiveNumber;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Positive number input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="42"
  />
</div>
`);
  });

  it('renders NegativeNumber story', () => {
    const Story = composedStories.NegativeNumber;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Negative number input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="-15"
  />
</div>
`);
  });

  it('renders ZeroValue story', () => {
    const Story = composedStories.ZeroValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Zero value input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="0"
  />
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-invalid="true"
    aria-label="Number input in error state"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md error-field"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="-999"
  />
</div>
`);
  });

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Number input in warning state"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md warning-field"
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="999"
  />
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Disabled number input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    disabled=""
    placeholder="Enter a number"
    spellcheck="false"
    type="text"
    value="100"
  />
</div>
`);
  });

  it('renders ReadOnly story', () => {
    const Story = composedStories.ReadOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Read-only number input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    readonly=""
    spellcheck="false"
    type="text"
    value="500"
  />
</div>
`);
  });

  it('renders Required story', () => {
    const Story = composedStories.Required;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Required number input"
    aria-required="true"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    placeholder="Enter a number"
    required=""
    spellcheck="false"
    type="text"
    value=""
  />
</div>
`);
  });

  it('renders WithName story', () => {
    const Story = composedStories.WithName;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Quantity input"
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
    class="numberField md"
    name="quantity"
    placeholder="Enter quantity"
    spellcheck="false"
    type="text"
    value="1"
  />
</div>
`);
  });

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