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

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

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

const composedStories = composeStories(stories);

describe('Field Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Required',
      'WithHint',
      'WithWarning',
      'WithError',
      'Disabled',
      'ReadOnly',
      'WithTooltip',
      'FullWidth',
      'Justified',
    ]);

    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="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Full name
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          placeholder="Enter your name"
          type="text"
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Required story', () => {
    const Story = composedStories.Required;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label v2FormField__label--required"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Email address
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          aria-required="true"
          class="textField md"
          id="_r_0_"
          placeholder="name@example.com"
          required=""
          type="text"
        />
        <span
          class="v2FormField__hint"
          id="_r_4_"
        >
          We will never share your email.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithHint story', () => {
    const Story = composedStories.WithHint;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Password
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          type="text"
        />
        <span
          class="v2FormField__hint"
          id="_r_4_"
        >
          Must be at least 8 characters.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithWarning story', () => {
    const Story = composedStories.WithWarning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Username
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          type="text"
          value="john_doe_123"
        />
        <span
          class="v2FormField__warning"
          id="_r_4_"
        >
          This username is already taken by an inactive account.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithError story', () => {
    const Story = composedStories.WithError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Email address
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-errormessage="_r_5_"
          aria-invalid="true"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          type="text"
          value="not-an-email"
        />
        <span
          class="v2FormField__error"
          id="_r_5_"
        >
          Please enter a valid email address.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Company name
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          disabled=""
          id="_r_0_"
          type="text"
          value="Shoptet a.s."
        />
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders ReadOnly story', () => {
    const Story = composedStories.ReadOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Account ID
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          readonly=""
          type="text"
          value="ACC-00123456"
        />
        <span
          class="v2FormField__hint"
          id="_r_4_"
        >
          This value cannot be changed.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithTooltip story', () => {
    const Story = composedStories.WithTooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          VAT number
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          placeholder="CZ12345678"
          type="text"
        />
      </div>
      <button
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        role="button"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-info"
        />
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders FullWidth story', () => {
    const Story = composedStories.FullWidth;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField full"
    >
      <label
        class="v2FormField__label"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Description
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          placeholder="Enter a description…"
          style="width: 100%;"
          type="text"
        />
        <span
          class="v2FormField__hint"
          id="_r_4_"
        >
          Briefly describe the item.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Justified story', () => {
    const Story = composedStories.Justified;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <label
        class="v2FormField__label v2FormField__label--justify"
        for="_r_0_"
        id="_r_1_"
      >
        <span
          class="v2FormField__labelText"
        >
          Description
        </span>
      </label>
      <div
        class="v2FormField__input"
      >
        <input
          aria-describedby="_r_2_ _r_3_ _r_4_"
          aria-labelledby="_r_1_"
          class="textField md"
          id="_r_0_"
          placeholder="Enter a description…"
          style="width: 100%;"
          type="text"
        />
        <span
          class="v2FormField__hint"
          id="_r_4_"
        >
          Briefly describe the item.
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });
});