import * as React from 'react';

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

import { TabPanel } from './TabPanel';

describe('TabPanel', () => {
  it('renders visible panel with default state', () => {
    const { container } = render(
      <TabPanel>
        <div>Panel content</div>
      </TabPanel>
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel"
  >
    <div>
      Panel content
    </div>
  </div>
</div>
`);
  });

  it('renders hidden panel', () => {
    const { container } = render(
      <TabPanel hidden>
        <div>Hidden panel content</div>
      </TabPanel>
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel--hidden"
  >
    <div>
      Hidden panel content
    </div>
  </div>
</div>
`);
  });

  it('renders with hidden=false explicitly', () => {
    const { container } = render(
      <TabPanel hidden={false}>
        <div>Visible panel content</div>
      </TabPanel>
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel"
  >
    <div>
      Visible panel content
    </div>
  </div>
</div>
`);
  });

  it('renders with complex content', () => {
    const { container } = render(
      <TabPanel>
        <div>
          <h2>Panel Title</h2>
          <p>
            Panel paragraph with <strong>bold text</strong>
          </p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </div>
      </TabPanel>
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel"
  >
    <div>
      <h2>
        Panel Title
      </h2>
      <p>
        Panel paragraph with 
        <strong>
          bold text
        </strong>
      </p>
      <ul>
        <li>
          Item 1
        </li>
        <li>
          Item 2
        </li>
      </ul>
    </div>
  </div>
</div>
`);
  });

  it('renders with string content', () => {
    const { container } = render(<TabPanel>Simple text content</TabPanel>);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel"
  >
    Simple text content
  </div>
</div>
`);
  });

  it('renders hidden panel with complex content', () => {
    const { container } = render(
      <TabPanel hidden>
        <div>
          <form>
            <input type='text' placeholder='Hidden form input' />
            <button type='submit'>Submit</button>
          </form>
        </div>
      </TabPanel>
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="ui-tabs-panel--hidden"
  >
    <div>
      <form>
        <input
          placeholder="Hidden form input"
          type="text"
        />
        <button
          type="submit"
        >
          Submit
        </button>
      </form>
    </div>
  </div>
</div>
`);
  });
});