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

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

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

const composedStories = composeStories(stories);

describe('TextInput Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithDefaultValue',
      'ErrorState',
      'WarningState',
      'DisabledState',
      'ReadOnlyState',
    ]);

    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
    aria-label="Text input"
    class="textField md"
    placeholder="Enter text here..."
    type="text"
  />
</div>
`);
  });

  it('renders WithDefaultValue story', () => {
    const Story = composedStories.WithDefaultValue;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Text input with default value"
    class="textField md"
    placeholder="Enter text here..."
    type="text"
    value="Default text"
  />
</div>
`);
  });

  it('renders ErrorState story', () => {
    const Story = composedStories.ErrorState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-invalid="true"
    aria-label="Text input in error state"
    class="textField md error-field"
    placeholder="Enter valid input..."
    type="text"
    value="Invalid input"
  />
</div>
`);
  });

  it('renders WarningState story', () => {
    const Story = composedStories.WarningState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Text input in warning state"
    class="textField md warning-field"
    placeholder="Enter text..."
    type="text"
    value="Warning: Check this input"
  />
</div>
`);
  });

  it('renders DisabledState story', () => {
    const Story = composedStories.DisabledState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Disabled text input"
    class="textField md"
    disabled=""
    placeholder="Disabled input"
    type="text"
    value="Cannot edit this"
  />
</div>
`);
  });

  it('renders ReadOnlyState story', () => {
    const Story = composedStories.ReadOnlyState;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <input
    aria-label="Read-only text input"
    class="textField md"
    readonly=""
    type="text"
    value="Read-only content"
  />
</div>
`);
  });
});