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

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

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

const composedStories = composeStories(stories);

describe('SingleSelect Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'SearchMode',
      'WithDefaultValue',
      'Controlled',
      'DisabledState',
      'WithNullableOption',
      'CheckedIndicatorEnd',
      'NoCheckedIndicator',
      'WithCustomValueRendering',
      'WithGroupedOptions',
      'EmptyOptions',
      'WithDisabledOptions',
      'SearchWithQuery',
      'WithLargeDataset',
    ]);

    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>
  <button
    aria-expanded="false"
    aria-label="Select an option"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-default"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Choose an option...
    </span>
  </button>
</div>
`);
  });

  it('renders SearchMode story', () => {
    const Story = composedStories.SearchMode;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Search for an option"
    class="singleSelectField__inputTrigger searchField md searchField--icon"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-search"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Search options...
    </span>
  </button>
</div>
`);
  });

  it('renders WithDefaultValue story', () => {
    const Story = composedStories.WithDefaultValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Banana, Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-default-value"
    tabindex="0"
    type="button"
  >
    <span
      class="typography typography__bodyCopyM typography--left typography--truncate"
      id="SingleSelectTrigger_r_0_"
    >
      Banana
    </span>
  </button>
</div>
`);
  });

  it('renders Controlled story', () => {
    const Story = composedStories.Controlled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 300px;"
  >
    <button
      aria-expanded="false"
      aria-label="Apple, Select fruit"
      class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
      data-rac=""
      data-react-aria-pressable="true"
      id="single-select-controlled"
      tabindex="0"
      type="button"
    >
      <span
        class="typography typography__bodyCopyM typography--left typography--truncate"
        id="SingleSelectTrigger_r_0_"
      >
        Apple
      </span>
    </button>
    <div
      style="margin-top: 8px; font-size: 12px; color: rgb(102, 102, 102);"
    >
      Selected value: 
      1
    </div>
  </div>
</div>
`);
  });

  it('renders DisabledState story', () => {
    const Story = composedStories.DisabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Banana, Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-disabled="true"
    data-rac=""
    data-react-aria-pressable="true"
    disabled=""
    id="single-select-disabled"
    type="button"
  >
    <span
      class="typography typography__bodyCopyM typography--left typography--truncate"
      id="SingleSelectTrigger_r_0_"
    >
      Banana
    </span>
  </button>
</div>
`);
  });

  it('renders WithNullableOption story', () => {
    const Story = composedStories.WithNullableOption;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-nullable"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Choose a fruit...
    </span>
  </button>
</div>
`);
  });

  it('renders CheckedIndicatorEnd story', () => {
    const Story = composedStories.CheckedIndicatorEnd;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Apple, Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-indicator-end"
    tabindex="0"
    type="button"
  >
    <span
      class="typography typography__bodyCopyM typography--left typography--truncate"
      id="SingleSelectTrigger_r_0_"
    >
      Apple
    </span>
  </button>
</div>
`);
  });

  it('renders NoCheckedIndicator story', () => {
    const Story = composedStories.NoCheckedIndicator;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Apple, Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-no-indicator"
    tabindex="0"
    type="button"
  >
    <span
      class="typography typography__bodyCopyM typography--left typography--truncate"
      id="SingleSelectTrigger_r_0_"
    >
      Apple
    </span>
  </button>
</div>
`);
  });

  it('renders WithCustomValueRendering story', () => {
    const Story = composedStories.WithCustomValueRendering;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Red, Select color"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-custom-value"
    tabindex="0"
    type="button"
  >
    <div
      style="display: flex; align-items: center; gap: 8px;"
    >
      <div
        style="width: 16px; height: 16px; background-color: rgb(255, 0, 0); border-radius: 50%; border: 1px solid rgb(204, 204, 204);"
      />
      <span
        id="SingleSelectTrigger_r_0_"
      >
        Red
      </span>
    </div>
  </button>
</div>
`);
  });

  it('renders WithGroupedOptions story', () => {
    const Story = composedStories.WithGroupedOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Select food item"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-grouped"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Choose food...
    </span>
  </button>
</div>
`);
  });

  it('renders EmptyOptions story', () => {
    const Story = composedStories.EmptyOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Select option"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-empty"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      No options available
    </span>
  </button>
</div>
`);
  });

  it('renders WithDisabledOptions story', () => {
    const Story = composedStories.WithDisabledOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Select fruit"
    class="singleSelectField__inputTrigger searchField md singleSelectField__inputTrigger--picker"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-disabled-options"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Some options are disabled...
    </span>
  </button>
</div>
`);
  });

  it('renders SearchWithQuery story', () => {
    const Story = composedStories.SearchWithQuery;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 300px;"
  >
    <button
      aria-expanded="false"
      aria-label="Search fruits"
      class="singleSelectField__inputTrigger searchField md searchField--icon"
      data-rac=""
      data-react-aria-pressable="true"
      id="single-select-search-query"
      tabindex="0"
      type="button"
    >
      <span
        aria-hidden="true"
        class="searchField__placeholder"
        id="SingleSelectTrigger_r_0_"
      >
        Type to search...
      </span>
    </button>
    <div
      style="margin-top: 8px; font-size: 12px; color: rgb(102, 102, 102);"
    >
      Query: 
       | Selected: 
      none
    </div>
  </div>
</div>
`);
  });

  it('renders WithLargeDataset story', () => {
    const Story = composedStories.WithLargeDataset;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    aria-label="Select item"
    class="singleSelectField__inputTrigger searchField md searchField--icon"
    data-rac=""
    data-react-aria-pressable="true"
    id="single-select-large-dataset"
    tabindex="0"
    type="button"
  >
    <span
      aria-hidden="true"
      class="searchField__placeholder"
      id="SingleSelectTrigger_r_0_"
    >
      Choose from 3000 items...
    </span>
  </button>
</div>
`);
  });
});