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

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

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

const composedStories = composeStories(stories);

describe('SingleSelectField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Uncontrolled',
      'UncontrolledEmptyOptions',
      'WithoutIcon',
      'SimpleFruitsSelect',
      'SimpleSelect',
      'NestedSelect',
      'ValueNumber',
      'ControlledValueNumber',
      'ValueStringUnion',
      'NullableOption',
    ]);

    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="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select city:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select city:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders Uncontrolled story', () => {
    const Story = composedStories.Uncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select city:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select city:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders UncontrolledEmptyOptions story', () => {
    const Story = composedStories.UncontrolledEmptyOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select city:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select city:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders WithoutIcon story', () => {
    const Story = composedStories.WithoutIcon;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select city:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select city:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Search...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders SimpleFruitsSelect story', () => {
    const Story = composedStories.SimpleFruitsSelect;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Search fruit:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Search fruit:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders SimpleSelect story', () => {
    const Story = composedStories.SimpleSelect;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select fruit:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select fruit:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders NestedSelect story', () => {
    const Story = composedStories.NestedSelect;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select item:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select item:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders ValueNumber story', () => {
    const Story = composedStories.ValueNumber;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select item:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select item:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders ControlledValueNumber story', () => {
    const Story = composedStories.ControlledValueNumber;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select item:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select item:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders ValueStringUnion story', () => {
    const Story = composedStories.ValueStringUnion;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select item:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select item:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders NullableOption story', () => {
    const Story = composedStories.NullableOption;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2FormField"
  >
    <label
      class="v2FormField__label"
      for="singleSelect_r_0_"
    >
      <span
        class="v2FormField__labelText"
      >
        Select fruit:
      </span>
    </label>
    <div
      class="v2FormField__singleSelect"
    >
      <button
        aria-expanded="false"
        aria-label="Select fruit:"
        class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
        data-rac=""
        data-react-aria-pressable="true"
        id="singleSelect_r_0_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="searchField__placeholder"
          id="SingleSelectTrigger_r_1_"
        >
          Choose value...
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });
});