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

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

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

const composedStories = composeStories(stories);

describe('CheckboxField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Error',
      'Justify',
      'Disabled',
      'Indeterminate',
      'IndeterminateDisabled',
      'IndeterminateInvalid',
      'LabelAfter',
      'Required',
      'Tooltip',
    ]);

    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>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        class="checkboxField"
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders Error story', () => {
    const Story = composedStories.Error;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-invalid="true"
        class="checkboxField error-field"
        type="checkbox"
      />
      <span
        class="v2FormField__labelAfter"
      >
        Checkbox
      </span>
      <span
        class="v2FormField__error"
      >
        Error message
      </span>
    </div>
  </label>
</div>
`);
  });

  it('renders Justify story', () => {
    const Story = composedStories.Justify;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label v2FormField__label--justify"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        class="checkboxField"
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders Disabled story', () => {
    const Story = composedStories.Disabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-disabled="true"
        aria-label="Checkbox"
        checked=""
        class="checkboxField checkboxField--checked"
        data-checked="true"
        data-disabled="true"
        disabled=""
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders Indeterminate story', () => {
    const Story = composedStories.Indeterminate;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        class="checkboxField checkboxField--indeterminate"
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders IndeterminateDisabled story', () => {
    const Story = composedStories.IndeterminateDisabled;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-disabled="true"
        aria-label="Checkbox"
        class="checkboxField checkboxField--indeterminate"
        data-disabled="true"
        disabled=""
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders IndeterminateInvalid story', () => {
    const Story = composedStories.IndeterminateInvalid;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-invalid="true"
        aria-label="Checkbox"
        class="checkboxField checkboxField--indeterminate error-field"
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders LabelAfter story', () => {
    const Story = composedStories.LabelAfter;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        class="checkboxField"
        type="checkbox"
      />
      <span
        class="v2FormField__labelAfter"
      >
        I agree to the terms and conditions
      </span>
    </div>
  </label>
</div>
`);
  });

  it('renders Required story', () => {
    const Story = composedStories.Required;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label v2FormField__label--required"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        aria-required="true"
        class="checkboxField"
        required=""
        type="checkbox"
      />
    </div>
  </label>
</div>
`);
  });

  it('renders Tooltip story', () => {
    const Story = composedStories.Tooltip;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <label
    class="v2FormField"
  >
    <span
      class="v2FormField__label"
    >
      <span
        class="v2FormField__labelText"
      >
        Checkbox
      </span>
    </span>
    <div
      class="v2FormField__checkbox"
    >
      <input
        aria-label="Checkbox"
        class="checkboxField"
        type="checkbox"
      />
    </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>
  </label>
</div>
`);
  });
});