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

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

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

const composedStories = composeStories(stories);

describe('SegmentedControl Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Sizes',
      'TextOnly',
      'IconText',
      'IconOnly',
      'WithSuffix',
      'DisabledOption',
      'DisabledGroup',
      'Uncontrolled',
      'CustomRenderOption',
      'PeriodSelector',
      'ViewToggle',
    ]);

    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
    style="display: inline-flex;"
  >
    <div
      aria-label="Filter orders by status"
      class="segmentedControl segmentedControl--md segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Vše"
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="all"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Vše
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Aktivní"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="active"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Aktivní
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Archiv"
          class="segmentedControl__segment-input"
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="archive"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Archiv
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders Sizes story', () => {
    const Story = composedStories.Sizes;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;"
    >
      <div
        style="display: flex; align-items: center; gap: 12px;"
      >
        <code
          style="width: 24px; font-size: 11px;"
        >
          lg
        </code>
        <div
          aria-label="Period selector lg"
          class="segmentedControl segmentedControl--lg segmentedControl--textOnly"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment"
            for="_r_0_"
          >
            <input
              aria-invalid="false"
              aria-label="Den"
              class="segmentedControl__segment-input"
              id="_r_0_"
              name="_r_1_"
              type="radio"
              value="day"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Den
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_2_"
          >
            <input
              aria-invalid="false"
              aria-label="Týden"
              class="segmentedControl__segment-input"
              id="_r_2_"
              name="_r_1_"
              type="radio"
              value="week"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Týden
            </span>
          </label>
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_3_"
          >
            <input
              aria-invalid="false"
              aria-label="Měsíc"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_3_"
              name="_r_1_"
              type="radio"
              value="month"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Měsíc
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_4_"
          >
            <input
              aria-invalid="false"
              aria-label="Rok"
              class="segmentedControl__segment-input"
              id="_r_4_"
              name="_r_1_"
              type="radio"
              value="year"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Rok
            </span>
          </label>
        </div>
      </div>
      <div
        style="display: flex; align-items: center; gap: 12px;"
      >
        <code
          style="width: 24px; font-size: 11px;"
        >
          md
        </code>
        <div
          aria-label="Period selector md"
          class="segmentedControl segmentedControl--md segmentedControl--textOnly"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment"
            for="_r_5_"
          >
            <input
              aria-invalid="false"
              aria-label="Den"
              class="segmentedControl__segment-input"
              id="_r_5_"
              name="_r_6_"
              type="radio"
              value="day"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Den
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_7_"
          >
            <input
              aria-invalid="false"
              aria-label="Týden"
              class="segmentedControl__segment-input"
              id="_r_7_"
              name="_r_6_"
              type="radio"
              value="week"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Týden
            </span>
          </label>
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_8_"
          >
            <input
              aria-invalid="false"
              aria-label="Měsíc"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_8_"
              name="_r_6_"
              type="radio"
              value="month"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Měsíc
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_9_"
          >
            <input
              aria-invalid="false"
              aria-label="Rok"
              class="segmentedControl__segment-input"
              id="_r_9_"
              name="_r_6_"
              type="radio"
              value="year"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Rok
            </span>
          </label>
        </div>
      </div>
      <div
        style="display: flex; align-items: center; gap: 12px;"
      >
        <code
          style="width: 24px; font-size: 11px;"
        >
          sm
        </code>
        <div
          aria-label="Period selector sm"
          class="segmentedControl segmentedControl--sm segmentedControl--textOnly"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment"
            for="_r_10_"
          >
            <input
              aria-invalid="false"
              aria-label="Den"
              class="segmentedControl__segment-input"
              id="_r_10_"
              name="_r_11_"
              type="radio"
              value="day"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Den
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_12_"
          >
            <input
              aria-invalid="false"
              aria-label="Týden"
              class="segmentedControl__segment-input"
              id="_r_12_"
              name="_r_11_"
              type="radio"
              value="week"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Týden
            </span>
          </label>
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_13_"
          >
            <input
              aria-invalid="false"
              aria-label="Měsíc"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_13_"
              name="_r_11_"
              type="radio"
              value="month"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Měsíc
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_14_"
          >
            <input
              aria-invalid="false"
              aria-label="Rok"
              class="segmentedControl__segment-input"
              id="_r_14_"
              name="_r_11_"
              type="radio"
              value="year"
            />
            <span
              class="segmentedControl__segment-label"
            >
              Rok
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders TextOnly story', () => {
    const Story = composedStories.TextOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Order status filter"
      class="segmentedControl segmentedControl--md segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Vše"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="all"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Vše
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Aktivní"
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="active"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Aktivní
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Archiv"
          class="segmentedControl__segment-input"
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="archive"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Archiv
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders IconText story', () => {
    const Story = composedStories.IconText;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;"
    >
      <div
        style="display: flex; flex-direction: column; gap: 6px; align-items: flex-start;"
      >
        <code
          style="font-size: 11px; color: rgb(136, 136, 136);"
        >
          :
          lg
        </code>
        <div
          aria-label="Product view toggle lg"
          class="segmentedControl segmentedControl--lg segmentedControl--iconText"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_0_"
          >
            <input
              aria-invalid="false"
              aria-label="Tabulka"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_0_"
              name="_r_1_"
              type="radio"
              value="table"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-list"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Tabulka
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_2_"
          >
            <input
              aria-invalid="false"
              aria-label="Karty"
              class="segmentedControl__segment-input"
              id="_r_2_"
              name="_r_1_"
              type="radio"
              value="cards"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-listImage"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Karty
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_3_"
          >
            <input
              aria-invalid="false"
              aria-label="Náhled"
              class="segmentedControl__segment-input"
              id="_r_3_"
              name="_r_1_"
              type="radio"
              value="preview"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-preview"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Náhled
            </span>
          </label>
        </div>
      </div>
      <div
        style="display: flex; flex-direction: column; gap: 6px; align-items: flex-start;"
      >
        <code
          style="font-size: 11px; color: rgb(136, 136, 136);"
        >
          :
          md
        </code>
        <div
          aria-label="Product view toggle md"
          class="segmentedControl segmentedControl--md segmentedControl--iconText"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_4_"
          >
            <input
              aria-invalid="false"
              aria-label="Tabulka"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_4_"
              name="_r_5_"
              type="radio"
              value="table"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-list"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Tabulka
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_6_"
          >
            <input
              aria-invalid="false"
              aria-label="Karty"
              class="segmentedControl__segment-input"
              id="_r_6_"
              name="_r_5_"
              type="radio"
              value="cards"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-listImage"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Karty
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_7_"
          >
            <input
              aria-invalid="false"
              aria-label="Náhled"
              class="segmentedControl__segment-input"
              id="_r_7_"
              name="_r_5_"
              type="radio"
              value="preview"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-preview"
              />
            </span>
            <span
              class="segmentedControl__segment-label"
            >
              Náhled
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders IconOnly story', () => {
    const Story = composedStories.IconOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;"
    >
      <div
        style="display: flex; flex-direction: column; gap: 6px; align-items: flex-start;"
      >
        <code
          style="font-size: 11px; color: rgb(136, 136, 136);"
        >
          :
          lg
        </code>
        <div
          aria-label="Product view toggle lg"
          class="segmentedControl segmentedControl--lg segmentedControl--iconOnly"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_0_"
          >
            <input
              aria-invalid="false"
              aria-label="Tabulka"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_0_"
              name="_r_1_"
              type="radio"
              value="table"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-list"
              />
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_2_"
          >
            <input
              aria-invalid="false"
              aria-label="Karty"
              class="segmentedControl__segment-input"
              id="_r_2_"
              name="_r_1_"
              type="radio"
              value="cards"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-listImage"
              />
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_3_"
          >
            <input
              aria-invalid="false"
              aria-label="Náhled"
              class="segmentedControl__segment-input"
              id="_r_3_"
              name="_r_1_"
              type="radio"
              value="preview"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-preview"
              />
            </span>
          </label>
        </div>
      </div>
      <div
        style="display: flex; flex-direction: column; gap: 6px; align-items: flex-start;"
      >
        <code
          style="font-size: 11px; color: rgb(136, 136, 136);"
        >
          :
          md
        </code>
        <div
          aria-label="Product view toggle md"
          class="segmentedControl segmentedControl--md segmentedControl--iconOnly"
          role="radiogroup"
        >
          <label
            class="segmentedControl__segment segmentedControl__segment--selected"
            for="_r_4_"
          >
            <input
              aria-invalid="false"
              aria-label="Tabulka"
              checked=""
              class="segmentedControl__segment-input"
              id="_r_4_"
              name="_r_5_"
              type="radio"
              value="table"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-list"
              />
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_6_"
          >
            <input
              aria-invalid="false"
              aria-label="Karty"
              class="segmentedControl__segment-input"
              id="_r_6_"
              name="_r_5_"
              type="radio"
              value="cards"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-listImage"
              />
            </span>
          </label>
          <label
            class="segmentedControl__segment"
            for="_r_7_"
          >
            <input
              aria-invalid="false"
              aria-label="Náhled"
              class="segmentedControl__segment-input"
              id="_r_7_"
              name="_r_5_"
              type="radio"
              value="preview"
            />
            <span
              aria-hidden="true"
              class="segmentedControl__segment-icon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--md shp-preview"
              />
            </span>
          </label>
        </div>
      </div>
      <span
        style="font-size: 11px; color: rgb(170, 170, 170);"
      >
        Note: not available in :sm — icons would not meet 24×24 spec inside a 22 px segment.
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders WithSuffix story', () => {
    const Story = composedStories.WithSuffix;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Order status with counts"
      class="segmentedControl segmentedControl--lg segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Vše"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="all"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Vše
        </span>
        <span
          class="segmentedControl__segment-suffix"
        >
          <span
            class="tag tag--primary tag--default tag--sm"
          >
            124
          </span>
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Aktivní"
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="active"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Aktivní
        </span>
        <span
          class="segmentedControl__segment-suffix"
        >
          <span
            class="tag tag--primary tag--default tag--sm"
          >
            89
          </span>
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Archiv"
          class="segmentedControl__segment-input"
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="archive"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Archiv
        </span>
        <span
          class="segmentedControl__segment-suffix"
        >
          <span
            class="tag tag--primary tag--default tag--sm"
          >
            35
          </span>
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders DisabledOption story', () => {
    const Story = composedStories.DisabledOption;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Order status — archive disabled"
      class="segmentedControl segmentedControl--md segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Vše"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="all"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Vše
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Aktivní"
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="active"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Aktivní
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--disabled"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Archiv"
          class="segmentedControl__segment-input"
          disabled=""
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="archive"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Archiv
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders DisabledGroup story', () => {
    const Story = composedStories.DisabledGroup;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Disabled group"
      class="segmentedControl segmentedControl--md segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment segmentedControl__segment--disabled"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Vše"
          class="segmentedControl__segment-input"
          disabled=""
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="all"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Vše
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--selected segmentedControl__segment--disabled"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Aktivní"
          checked=""
          class="segmentedControl__segment-input"
          disabled=""
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="active"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Aktivní
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--disabled"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Archiv"
          class="segmentedControl__segment-input"
          disabled=""
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="archive"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Archiv
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders Uncontrolled story', () => {
    const Story = composedStories.Uncontrolled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Uncontrolled period selector"
      class="segmentedControl segmentedControl--md segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Den"
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="day"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Den
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Týden"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="week"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Týden
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Měsíc"
          class="segmentedControl__segment-input"
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="month"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Měsíc
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_4_"
      >
        <input
          aria-invalid="false"
          aria-label="Rok"
          class="segmentedControl__segment-input"
          id="_r_4_"
          name="_r_1_"
          type="radio"
          value="year"
        />
        <span
          class="segmentedControl__segment-label"
        >
          Rok
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders CustomRenderOption story', () => {
    const Story = composedStories.CustomRenderOption;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Table density"
      class="segmentedControl segmentedControl--lg segmentedControl--textOnly"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Pohodlné"
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="comfortable"
        />
        <span
          style="display: flex; flex-direction: column; padding: 2px 8px; line-height: 1.3;"
        >
          <span
            style="font-weight: 400; font-size: 12px;"
          >
            Pohodlné
          </span>
          <span
            style="font-size: 10px; opacity: 0.6;"
          >
            Větší mezery
          </span>
        </span>
      </label>
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Střední"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="cozy"
        />
        <span
          style="display: flex; flex-direction: column; padding: 2px 8px; line-height: 1.3;"
        >
          <span
            style="font-weight: 600; font-size: 12px;"
          >
            Střední
          </span>
          <span
            style="font-size: 10px; opacity: 0.6;"
          >
            Vyrovnané
          </span>
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_3_"
      >
        <input
          aria-invalid="false"
          aria-label="Kompaktní"
          class="segmentedControl__segment-input"
          id="_r_3_"
          name="_r_1_"
          type="radio"
          value="compact"
        />
        <span
          style="display: flex; flex-direction: column; padding: 2px 8px; line-height: 1.3;"
        >
          <span
            style="font-weight: 400; font-size: 12px;"
          >
            Kompaktní
          </span>
          <span
            style="font-size: 10px; opacity: 0.6;"
          >
            Více dat
          </span>
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });

  it('renders PeriodSelector story', () => {
    const Story = composedStories.PeriodSelector;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;"
    >
      <span
        style="font-size: 12px; color: rgb(136, 136, 136);"
      >
        Tržby
      </span>
      <div
        aria-label="Vyberte agregační období"
        class="segmentedControl segmentedControl--sm segmentedControl--textOnly"
        role="radiogroup"
      >
        <label
          class="segmentedControl__segment"
          for="_r_0_"
        >
          <input
            aria-invalid="false"
            aria-label="Den"
            class="segmentedControl__segment-input"
            id="_r_0_"
            name="_r_1_"
            type="radio"
            value="day"
          />
          <span
            class="segmentedControl__segment-label"
          >
            Den
          </span>
        </label>
        <label
          class="segmentedControl__segment"
          for="_r_2_"
        >
          <input
            aria-invalid="false"
            aria-label="Týden"
            class="segmentedControl__segment-input"
            id="_r_2_"
            name="_r_1_"
            type="radio"
            value="week"
          />
          <span
            class="segmentedControl__segment-label"
          >
            Týden
          </span>
        </label>
        <label
          class="segmentedControl__segment segmentedControl__segment--selected"
          for="_r_3_"
        >
          <input
            aria-invalid="false"
            aria-label="Měsíc"
            checked=""
            class="segmentedControl__segment-input"
            id="_r_3_"
            name="_r_1_"
            type="radio"
            value="month"
          />
          <span
            class="segmentedControl__segment-label"
          >
            Měsíc
          </span>
        </label>
        <label
          class="segmentedControl__segment"
          for="_r_4_"
        >
          <input
            aria-invalid="false"
            aria-label="Rok"
            class="segmentedControl__segment-input"
            id="_r_4_"
            name="_r_1_"
            type="radio"
            value="year"
          />
          <span
            class="segmentedControl__segment-label"
          >
            Rok
          </span>
        </label>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders ViewToggle story', () => {
    const Story = composedStories.ViewToggle;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: inline-flex;"
  >
    <div
      aria-label="Přepnout zobrazení produktů"
      class="segmentedControl segmentedControl--md segmentedControl--iconText"
      role="radiogroup"
    >
      <label
        class="segmentedControl__segment segmentedControl__segment--selected"
        for="_r_0_"
      >
        <input
          aria-invalid="false"
          aria-label="Tabulka"
          checked=""
          class="segmentedControl__segment-input"
          id="_r_0_"
          name="_r_1_"
          type="radio"
          value="table"
        />
        <span
          aria-hidden="true"
          class="segmentedControl__segment-icon"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-list"
          />
        </span>
        <span
          class="segmentedControl__segment-label"
        >
          Tabulka
        </span>
      </label>
      <label
        class="segmentedControl__segment"
        for="_r_2_"
      >
        <input
          aria-invalid="false"
          aria-label="Karty"
          class="segmentedControl__segment-input"
          id="_r_2_"
          name="_r_1_"
          type="radio"
          value="cards"
        />
        <span
          aria-hidden="true"
          class="segmentedControl__segment-icon"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-listImage"
          />
        </span>
        <span
          class="segmentedControl__segment-label"
        >
          Karty
        </span>
      </label>
    </div>
  </div>
</div>
`);
  });
});