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

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

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

const composedStories = composeStories(stories);

describe('LandingPageSection Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'TitleOnly',
      'WithDescription',
      'WithImage',
      'WithImageMaxWidthFit',
      'WithActions',
      'WithActionsSingle',
      'WithChildren',
    ]);

    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>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
      <p
        class="typography typography__bodyCopyM typography--center"
      >
        This is a description for the landing content. It can be a simple string or any React node.
      </p>
    </div>
    <div
      class="landingPage__section-content landingPage__section-content--maxWidthFit"
    >
      <img
        alt=""
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMjAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        style="text-align: center;"
      >
        <strong>
          Here is some custom content!
        </strong>
      </div>
    </div>
    <div
      class="landingPage__section-actions landingPage__section-actions--2columns"
    >
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Continue
        </span>
      </button>
      <button
        class="btn btn-secondary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Learn More
        </span>
      </button>
    </div>
  </section>
</div>
`);
  });

  it('renders TitleOnly story', () => {
    const Story = composedStories.TitleOnly;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
  </section>
</div>
`);
  });

  it('renders WithDescription story', () => {
    const Story = composedStories.WithDescription;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
      <p
        class="typography typography__bodyCopyM typography--center"
      >
        This is a description for the landing content. It can be a simple string or any React node.
      </p>
    </div>
  </section>
</div>
`);
  });

  it('renders WithImage story', () => {
    const Story = composedStories.WithImage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
    <div
      class="landingPage__section-content landingPage__section-content--maxWidthMedium"
    >
      <img
        alt=""
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMjAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
      />
    </div>
  </section>
</div>
`);
  });

  it('renders WithImageMaxWidthFit story', () => {
    const Story = composedStories.WithImageMaxWidthFit;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
    <div
      class="landingPage__section-content landingPage__section-content--maxWidthFit"
    >
      <img
        alt=""
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMjAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
      />
    </div>
  </section>
</div>
`);
  });

  it('renders WithActions story', () => {
    const Story = composedStories.WithActions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
    <div
      class="landingPage__section-actions landingPage__section-actions--2columns"
    >
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Continue
        </span>
      </button>
      <button
        class="btn btn-secondary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Learn More
        </span>
      </button>
    </div>
  </section>
</div>
`);
  });

  it('renders WithActionsSingle story', () => {
    const Story = composedStories.WithActionsSingle;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
    <div
      class="landingPage__section-actions"
    >
      <button
        class="btn btn-primary btn-sm"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Continue
        </span>
      </button>
    </div>
  </section>
</div>
`);
  });

  it('renders WithChildren story', () => {
    const Story = composedStories.WithChildren;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <section
    class="landingPage__section"
  >
    <div
      class="landingPage__section-header"
    >
      <h2
        class="typography typography__headline1 typography--center"
      >
        Landing Content Title
      </h2>
    </div>
    <div
      class="landingPage__section-content landingPage__section-content--maxWidthMedium"
    >
      <div
        style="text-align: center;"
      >
        <strong>
          Here is some custom content!
        </strong>
      </div>
    </div>
  </section>
</div>
`);
  });
});