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

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

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

const composedStories = composeStories(stories);

describe('DataList Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithDescription',
      'TwoColumns',
      'ThreeCells',
      'Sections',
      'NativeHTMLItems',
      'NativeHTMLItemCells',
    ]);

    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="dataList dataList--noGap"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Apple
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Banana
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Cherry
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Date
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Elderberry
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithDescription story', () => {
    const Story = composedStories.WithDescription;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--noGap"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Apple
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          A sweet, edible fruit produced by an apple tree.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Banana
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          An elongated, edible fruit produced by several kinds of large herbaceous flowering plants.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Cherry
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          A small, round stone fruit that is typically bright or dark red.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Date
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          The fruit of the date palm, a tree native to Northern Africa and the Middle East.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Elderberry
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          A fruit of the elder tree, used in wines, syrups, and jams.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders TwoColumns story', () => {
    const Story = composedStories.TwoColumns;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--noGap"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Apple
        </strong>
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--right"
        >
          A sweet, edible fruit produced by an apple tree.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Banana
        </strong>
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--right"
        >
          An elongated, edible fruit produced by several kinds of large herbaceous flowering plants.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Cherry
        </strong>
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--right"
        >
          A small, round stone fruit that is typically bright or dark red.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Date
        </strong>
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--right"
        >
          The fruit of the date palm, a tree native to Northern Africa and the Middle East.
        </span>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Elderberry
        </strong>
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--right"
        >
          A fruit of the elder tree, used in wines, syrups, and jams.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders ThreeCells story', () => {
    const Story = composedStories.ThreeCells;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--noGap"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Apple
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left typography--truncate"
        >
          A sweet, edible fruit produced by an apple tree.
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-arrow-right"
        />
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Banana
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left typography--truncate"
        >
          An elongated, edible fruit produced by several kinds of large herbaceous flowering plants.
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-arrow-right"
        />
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Cherry
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left typography--truncate"
        >
          A small, round stone fruit that is typically bright or dark red.
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-arrow-right"
        />
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Date
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left typography--truncate"
        >
          The fruit of the date palm, a tree native to Northern Africa and the Middle East.
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-arrow-right"
        />
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Elderberry
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left typography--truncate"
        >
          A fruit of the elder tree, used in wines, syrups, and jams.
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-arrow-right"
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Sections story', () => {
    const Story = composedStories.Sections;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--dense dataList--gapSm"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell"
      >
        <input
          aria-label="Checkbox label"
          class="checkboxField"
          type="checkbox"
        />
      </div>
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Select all
        </span>
      </div>
    </div>
    <section
      class="dataList__section"
    >
      <header
        class="dataList__sectionHeader dataList__sectionHeader--gap"
      >
        <span
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
        >
          Fruits
        </span>
      </header>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Apple
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Banana
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Cherry
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Date
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Elderberry
          </span>
        </div>
      </div>
    </section>
    <section
      class="dataList__section"
    >
      <header
        class="dataList__sectionHeader dataList__sectionHeader--gap"
      >
        <span
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink typography typography__bodyCopyS typography--left"
        >
          Vegetables
        </span>
      </header>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Carrot
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Broccoli
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Spinach
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Potato
          </span>
        </div>
      </div>
      <div
        class="dataList__item dataList__item--gap"
      >
        <div
          class="dataList__itemCell"
        >
          <input
            aria-label="Checkbox label"
            class="checkboxField"
            type="checkbox"
          />
        </div>
        <div
          class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          >
            Tomato
          </span>
        </div>
      </div>
    </section>
  </div>
</div>
`);
  });

  it('renders NativeHTMLItems story', () => {
    const Story = composedStories.NativeHTMLItems;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--noGap"
  >
    <a
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-react-aria-pressable="true"
      href="#"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Anchor Element with href
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Anchor
      </span>
    </a>
    <a
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
      data-react-aria-pressable="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Anchor Element (with no href)
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Anchor + aria-disabled
      </span>
    </a>
    <a
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
      data-react-aria-pressable="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Anchor Element (with no href)
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Anchor + data-disabled
      </span>
    </a>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      tabindex="0"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Div Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Div
      </span>
    </div>
    <div
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Div Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Div + aria-disabled
      </span>
    </div>
    <div
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Div Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Div + data-disabled
      </span>
    </div>
    <button
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Button Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Button
      </span>
    </button>
    <button
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Button Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Button + disabled
      </span>
    </button>
    <button
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Button Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Button + aria-disabled
      </span>
    </button>
    <button
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <strong
        class="typography typography__bodyCopyMB typography--left"
      >
        HTML Button Element
      </strong>
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Button + data-disabled
      </span>
    </button>
  </div>
</div>
`);
  });

  it('renders NativeHTMLItemCells story', () => {
    const Story = composedStories.NativeHTMLItemCells;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dataList dataList--noGap"
  >
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Active item
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Description
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <a
          data-react-aria-pressable="true"
          href="#"
        >
          Anchor with href
        </a>
      </div>
    </div>
    <div
      aria-disabled="true"
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Disabled item
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Description
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <a
          data-react-aria-pressable="true"
          href="#"
        >
          Anchor with href
        </a>
      </div>
    </div>
    <div
      class="dataList__item dataList__item--hasDivider dataList__item--gap"
      data-disabled="true"
    >
      <div
        class="dataList__itemCell dataList__itemCell--grow dataList__itemCell--shrink"
      >
        <strong
          class="typography typography__bodyCopyMB typography--left"
        >
          Disabled item
        </strong>
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Description
        </span>
      </div>
      <div
        class="dataList__itemCell"
      >
        <a
          data-react-aria-pressable="true"
        >
          Anchor with no href
        </a>
      </div>
    </div>
  </div>
</div>
`);
  });
});