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

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

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

const composedStories = composeStories(stories);

describe('NestedNavigation Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'ControlledStack',
      'Standalone',
      'WrappedLevels',
      'DisabledItem',
      'PerLevelHeaders',
    ]);

    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"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Otevřít styl stránek
    </span>
  </button>
</div>
`);
  });

  it('renders ControlledStack story', () => {
    const Story = composedStories.ControlledStack;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Otevřít styl stránek
    </span>
  </button>
</div>
`);
  });

  it('renders Standalone story', () => {
    const Story = composedStories.Standalone;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 320px;"
  >
    <div
      class="nestedNavigation"
    >
      <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="polite"
        >
          Styl stránek
        </span>
      </div>
      <div
        class="nestedNavigationHeader"
      >
        <div
          class="nestedNavigationHeader__row nestedNavigationHeader__row--top"
        >
          <h2
            class="typography typography__headline3 typography--left nestedNavigationHeader__title nestedNavigationHeader__title--indented"
            id="_r_0_"
          >
            Styl stránek
          </h2>
          <button
            aria-label="Close Styl stránek"
            class="iconButton iconButton--md iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-cross"
            />
          </button>
        </div>
        <div
          aria-orientation="horizontal"
          class="divider"
          role="separator"
        />
      </div>
      <ul
        aria-labelledby="_r_0_"
        class="nestedNavigationList"
        role="list"
      >
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Barvy
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Fonty a písma
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Tlačítka
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Formuláře
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Zaoblení rohů
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Mezery a rozestupy
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Animace stránek
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
`);
  });

  it('renders WrappedLevels story', () => {
    const Story = composedStories.WrappedLevels;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 320px;"
  >
    <div
      class="nestedNavigation"
    >
      <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="polite"
        >
          Styl stránek
        </span>
      </div>
      <div
        class="nestedNavigationHeader"
      >
        <div
          class="nestedNavigationHeader__row nestedNavigationHeader__row--top"
        >
          <h2
            class="typography typography__headline3 typography--left nestedNavigationHeader__title nestedNavigationHeader__title--indented"
            id="_r_0_"
          >
            Styl stránek
          </h2>
          <button
            aria-label="Close Styl stránek"
            class="iconButton iconButton--md iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-cross"
            />
          </button>
        </div>
        <div
          aria-orientation="horizontal"
          class="divider"
          role="separator"
        />
      </div>
      <ul
        aria-labelledby="_r_0_"
        class="nestedNavigationList"
        role="list"
      >
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Barvy
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
      </ul>
      <div />
    </div>
  </div>
</div>
`);
  });

  it('renders DisabledItem story', () => {
    const Story = composedStories.DisabledItem;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="width: 320px;"
  >
    <div
      class="nestedNavigation"
    >
      <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="polite"
        >
          Styl stránek
        </span>
      </div>
      <div
        class="nestedNavigationHeader"
      >
        <div
          class="nestedNavigationHeader__row nestedNavigationHeader__row--top"
        >
          <h2
            class="typography typography__headline3 typography--left nestedNavigationHeader__title nestedNavigationHeader__title--indented"
            id="_r_0_"
          >
            Styl stránek
          </h2>
          <button
            aria-label="Close Styl stránek"
            class="iconButton iconButton--md iconButton--secondary iconButton--ghost"
            type="button"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--md shp-cross"
            />
          </button>
        </div>
        <div
          aria-orientation="horizontal"
          class="divider"
          role="separator"
        />
      </div>
      <ul
        aria-labelledby="_r_0_"
        class="nestedNavigationList"
        role="list"
      >
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Dostupná sekce
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
        <li
          class="nestedNavigationItem"
        >
          <button
            data-react-aria-pressable="true"
            disabled=""
            type="button"
          >
            <span
              class="nestedNavigationItem__row"
            >
              <span
                class="nestedNavigationItem__labelGroup"
              >
                <span
                  class="nestedNavigationItem__label"
                >
                  Uzamčená sekce
                </span>
              </span>
              <span
                class="nestedNavigationItem__chevron"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--secondary icon--md shp-arrow-right"
                />
              </span>
            </span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
`);
  });

  it('renders PerLevelHeaders story', () => {
    const Story = composedStories.PerLevelHeaders;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <button
    aria-expanded="false"
    class="btn btn-primary btn-sm"
    data-react-aria-pressable="true"
    tabindex="0"
    type="button"
  >
    <span
      class="btn--content"
    >
      Otevřít styl stránek
    </span>
  </button>
</div>
`);
  });
});