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

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

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

const composedStories = composeStories(stories);

describe('USPCard Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'NoImage',
      'ThreeColumns',
      'OneReversed',
      'WithContainedImage',
      'WithCoverImage',
    ]);

    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="uspCard uspCard--hasImage uspCard--isResponsive"
  >
    <img
      alt=""
      class="uspCard__image uspCard__image--contain"
      loading="lazy"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
    />
    <div
      class="uspCard__content"
    >
      <h2
        class="typography typography__headline2 typography--left"
      >
        Lorem ipsum dolor sit amet
      </h2>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
      </p>
    </div>
  </div>
</div>
`);
  });

  it('renders NoImage story', () => {
    const Story = composedStories.NoImage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="uspCard uspCard--hasNoImage uspCard--isResponsive"
  >
    <div
      class="uspCard__content"
    >
      <h2
        class="typography typography__headline2 typography--left"
      >
        Lorem ipsum dolor sit amet
      </h2>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
      </p>
    </div>
  </div>
</div>
`);
  });

  it('renders ThreeColumns story', () => {
    const Story = composedStories.ThreeColumns;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <style>
    
          .responsive-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }
          @media (min-width: 768px) {
            .responsive-columns {
              gap: 24px;
            }
            .responsive-columns &gt; * {
              flex: 1;
              min-width: 0px;
              width: calc((100% - 2 * 24px) / 3);
            }
          }
        
  </style>
  <div
    class="responsive-columns"
  >
    <div
      class="uspCard uspCard--hasImage uspCard--isNotResponsive"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
    <div
      class="uspCard uspCard--hasImage uspCard--isNotResponsive"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
    <div
      class="uspCard uspCard--hasImage uspCard--isNotResponsive"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders OneReversed story', () => {
    const Story = composedStories.OneReversed;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    style="display: flex; flex-direction: column; gap: 1em;"
  >
    <div
      class="uspCard uspCard--hasImage uspCard--isResponsive"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
    <div
      class="uspCard uspCard--hasImage uspCard--isResponsiveReversed"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
    <div
      class="uspCard uspCard--hasImage uspCard--isResponsive"
    >
      <img
        alt=""
        class="uspCard__image uspCard__image--contain"
        loading="lazy"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCI+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42NDB4NDgwPC90ZXh0Pgo8L3N2Zz4="
      />
      <div
        class="uspCard__content"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Lorem ipsum dolor sit amet
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
        </p>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithContainedImage story', () => {
    const Story = composedStories.WithContainedImage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="uspCard uspCard--hasImage uspCard--isResponsive"
  >
    <img
      alt=""
      class="uspCard__image uspCard__image--contain"
      loading="lazy"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
    />
    <div
      class="uspCard__content"
    >
      <h2
        class="typography typography__headline2 typography--left"
      >
        Lorem ipsum dolor sit amet
      </h2>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
      </p>
    </div>
  </div>
</div>
`);
  });

  it('renders WithCoverImage story', () => {
    const Story = composedStories.WithCoverImage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="uspCard uspCard--hasImage uspCard--isResponsive"
  >
    <img
      alt=""
      class="uspCard__image uspCard__image--cover"
      loading="lazy"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
    />
    <div
      class="uspCard__content"
    >
      <h2
        class="typography typography__headline2 typography--left"
      >
        Lorem ipsum dolor sit amet
      </h2>
      <p
        class="typography typography__bodyCopyM typography--left"
      >
        Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.
      </p>
    </div>
  </div>
</div>
`);
  });
});