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

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

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

const composedStories = composeStories(stories);

describe('RangeInput Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithDefaultValue',
      'Controlled',
      'DashSeparator',
      'PipeSeparator',
      'ToSeparator',
      'ErrorState',
      'WarningState',
      'LoadingState',
      'DisabledState',
    ]);

    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>
  <fieldset
    aria-label="Price Range, Range, from unset, to unset, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value=""
    />
    <input
      aria-label="Price Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Price Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value=""
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Price Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Price Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value=""
    />
  </fieldset>
</div>
`);
  });

  it('renders WithDefaultValue story', () => {
    const Story = composedStories.WithDefaultValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Price Range, Range, from 100, to 500, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value="100 - 500"
    />
    <input
      aria-label="Price Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Price Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value="100"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Price Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Price Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value="500"
    />
  </fieldset>
</div>
`);
  });

  it('renders Controlled story', () => {
    const Story = composedStories.Controlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Date Range, Range, from 2024-01-01, to 2024-12-31, use  , t, o,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value="2024-01-01 to 2024-12-31"
    />
    <input
      aria-label="Date Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Date Range"
      tabindex="-1"
      type="text"
      value="2024-01-01"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       to 
    </span>
    <input
      aria-label="Date Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Date Range"
      tabindex="-1"
      type="text"
      value="2024-12-31"
    />
  </fieldset>
</div>
`);
  });

  it('renders DashSeparator story', () => {
    const Story = composedStories.DashSeparator;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Age Range, Range, from unset, to unset, use - to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value=""
    />
    <input
      aria-label="Age Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Age Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value=""
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
      -
    </span>
    <input
      aria-label="Age Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Age Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value=""
    />
  </fieldset>
</div>
`);
  });

  it('renders PipeSeparator story', () => {
    const Story = composedStories.PipeSeparator;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Score Range, Range, from unset, to unset, use  , |,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value=""
    />
    <input
      aria-label="Score Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Score Range"
      placeholder="Low"
      tabindex="-1"
      type="text"
      value=""
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       | 
    </span>
    <input
      aria-label="Score Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Score Range"
      placeholder="High"
      tabindex="-1"
      type="text"
      value=""
    />
  </fieldset>
</div>
`);
  });

  it('renders ToSeparator story', () => {
    const Story = composedStories.ToSeparator;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Time Range, Range, from 9:00, to 17:00, use  , t, o,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value="9:00 to 17:00"
    />
    <input
      aria-label="Time Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Time Range"
      placeholder="Start"
      tabindex="-1"
      type="text"
      value="9:00"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       to 
    </span>
    <input
      aria-label="Time Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Time Range"
      placeholder="End"
      tabindex="-1"
      type="text"
      value="17:00"
    />
  </fieldset>
</div>
`);
  });

  it('renders ErrorState story', () => {
    const Story = composedStories.ErrorState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Price Range, Range, from 500, to 100, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value="500 - 100"
    />
    <input
      aria-label="Price Range, Range, value from:"
      class="rangeInput__inputStart textField error-field"
      label="Price Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value="500"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Price Range, Range, value to:"
      class="rangeInput__inputEnd textField error-field"
      label="Price Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value="100"
    />
  </fieldset>
</div>
`);
  });

  it('renders WarningState story', () => {
    const Story = composedStories.WarningState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Budget Range, Range, from 10000, to 50000, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value="10000 - 50000"
    />
    <input
      aria-label="Budget Range, Range, value from:"
      class="rangeInput__inputStart textField warning-field"
      label="Budget Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value="10000"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Budget Range, Range, value to:"
      class="rangeInput__inputEnd textField warning-field"
      label="Budget Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value="50000"
    />
  </fieldset>
</div>
`);
  });

  it('renders LoadingState story', () => {
    const Story = composedStories.LoadingState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Price Range, Range, from unset, to unset, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      type="hidden"
      value=""
    />
    <input
      aria-label="Price Range, Range, value from:"
      class="rangeInput__inputStart textField"
      label="Price Range"
      placeholder="Loading..."
      tabindex="-1"
      type="text"
      value=""
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Price Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      label="Price Range"
      tabindex="-1"
      type="text"
      value=""
    />
    <div
      aria-label="Loading"
      aria-live="polite"
      aria-valuemax="100"
      aria-valuemin="0"
      class="loader loader--sm"
      id="react-aria-_r_0_"
      role="progressbar"
    />
  </fieldset>
</div>
`);
  });

  it('renders DisabledState story', () => {
    const Story = composedStories.DisabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <fieldset
    aria-label="Price Range, Range, from 100, to 500, use  , -,   to separate values"
    class="rangeInput"
    tabindex="0"
  >
    <input
      autocomplete="off"
      disabled=""
      type="hidden"
      value="100 - 500"
    />
    <input
      aria-label="Price Range, Range, value from:"
      class="rangeInput__inputStart textField"
      disabled=""
      label="Price Range"
      placeholder="Min"
      tabindex="-1"
      type="text"
      value="100"
    />
    <span
      aria-hidden="true"
      class="rangeInput__separator"
    >
       - 
    </span>
    <input
      aria-label="Price Range, Range, value to:"
      class="rangeInput__inputEnd textField"
      disabled=""
      label="Price Range"
      placeholder="Max"
      tabindex="-1"
      type="text"
      value="500"
    />
  </fieldset>
</div>
`);
  });
});