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

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

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

const composedStories = composeStories(stories);

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

    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="grid grid--3columns grid--gap grid--noPadding grid--responsive"
  >
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      1
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      2
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      3
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      4
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      5
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      6
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      7
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      8
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      9
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      10
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      11
    </div>
    <div
      style="background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.33); padding: 1rem; text-align: center;"
    >
      Example item 
      12
    </div>
  </div>
</div>
`);
  });

  it('renders LandingPage story', () => {
    const Story = composedStories.LandingPage;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="grid grid--1columns grid--maxWidthLarge grid--gap4xl grid--noPadding grid--notResponsive"
  >
    <div
      class="ctaBanner"
    >
      <div
        class="ctaBanner__content"
      >
        <h2
          class="typography typography__headline1 typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Proin ultrices quam eget ante fermentum, a aliquam massa vulputate. Suspendisse lacinia sapien leo, ac porttitor quam ornare eu.
        </p>
      </div>
      Click here
    </div>
    <div
      class="grid grid--3columns grid--maxWidthLarge grid--gap grid--paddingVertical grid--responsive"
    >
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 1
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 2
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 3
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 4
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 5
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--gapMd grid--noPadding grid--responsive"
      >
        <h2
          class="typography typography__headline2 typography--left"
        >
          Column 6
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
    </div>
    <div
      class="grid grid--1columns grid--noGap grid--noPadding grid--notResponsive"
    >
      <div
        class="grid grid--1columns grid--maxWidthMedium grid--gapMd grid--paddingVertical grid--notResponsive"
      >
        <h2
          class="typography typography__headline1 typography--center typography--divider"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </h2>
        <p
          class="typography typography__bodyCopyM typography--left"
        >
          Proin ultrices quam eget ante fermentum, a aliquam massa vulputate. Suspendisse lacinia sapien leo, ac porttitor quam ornare eu. Aliquam fermentum, tortor ac sagittis maximus, quam ante interdum erat, eu lobortis libero ante quis sapien. Nullam mauris risus, porta a mauris at, dapibus rutrum diam. Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus convallis.
        </p>
      </div>
      <div
        class="grid grid--1columns grid--maxWidthMedium grid--gap grid--paddingVertical grid--responsive"
      >
        <img
          alt="Placeholder"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDkwMCIgd2lkdGg9IjEyMDAiIGhlaWdodD0iOTAwIj4KICA8cmVjdCB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMjAweDkwMDwvdGV4dD4KPC9zdmc+"
        />
      </div>
      <div
        class="grid grid--2columns grid--maxWidthFit grid--gap grid--paddingVertical grid--responsive"
      >
        <button
          class="btn btn-secondary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Secondary CTA Button
          </span>
        </button>
        <button
          class="btn btn-primary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Primary Action
          </span>
        </button>
      </div>
    </div>
    <div
      class="grid grid--1columns grid--maxWidthMedium grid--gap4xl grid--paddingVertical grid--notResponsive"
    >
      <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>
</div>
`);
  });
});