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

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

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

const composedStories = composeStories(stories);

describe('PromoHero Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'WithImageFitContain', 'WithImageFitCover']);

    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>
  <div
    class="promoHero"
  >
    <div
      class="promoHero__content"
    >
      <h1
        class="typography typography__headline1 typography--left"
      >
        Promo Hero Title
      </h1>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Promo Hero Description
      </p>
      <div
        class="promoHero__action"
      >
        Promo Hero Action
      </div>
    </div>
    <div
      class="promoHero__image promoHero__image--contain"
    >
      <img
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4NDAwPC90ZXh0Pgo8L3N2Zz4="
      />
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageFitContain story', () => {
    const Story = composedStories.WithImageFitContain;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="promoHero"
  >
    <div
      class="promoHero__content"
    >
      <h1
        class="typography typography__headline1 typography--left"
      >
        Promo Hero Title
      </h1>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Promo Hero Description
      </p>
      <div
        class="promoHero__action"
      >
        Promo Hero Action
      </div>
    </div>
    <div
      class="promoHero__image promoHero__image--contain"
    >
      <img
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
      />
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageFitCover story', () => {
    const Story = composedStories.WithImageFitCover;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="promoHero"
  >
    <div
      class="promoHero__content"
    >
      <h1
        class="typography typography__headline1 typography--left"
      >
        Promo Hero Title
      </h1>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Promo Hero Description
      </p>
      <div
        class="promoHero__action"
      >
        Promo Hero Action
      </div>
    </div>
    <div
      class="promoHero__image promoHero__image--cover"
    >
      <img
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
      />
    </div>
  </div>
</div>
`);
  });
});