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

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

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

const composedStories = composeStories(stories);

describe('Checkbox Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Checked',
      'Disabled',
      'Error',
      'Warning',
      'Indeterminate',
      'IndeterminateInvalid',
    ]);

    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>
  <input
    class="checkboxField"
    type="checkbox"
  />
</div>
`);
  });

  it('renders Checked story', () => {
    const Story = composedStories.Checked;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    checked=""
    class="checkboxField checkboxField--checked"
    data-checked="true"
    type="checkbox"
  />
</div>
`);
  });

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

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

  it('renders Warning story', () => {
    const Story = composedStories.Warning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    class="checkboxField warning-field"
    type="checkbox"
  />
</div>
`);
  });

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

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