/* eslint-disable max-len */
import React from 'react';
import renderer from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies

import TextIcon from '../TextIcon';
import Cards from './index';

const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;

test('Cards renders correctly', () => {
  const tree = renderer.create(
    <div>
      <p>Items per row auto (max 4) : result 2</p>
      <Cards>
        <Card>
          <Icon src="/pic-pig.svg" />
          <Section>
            <SectionTitle>Lorem ipsum dolor</SectionTitle>
            <SectionBody src="/pic-pig.svg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.
            </SectionBody>
            <SectionFooter>
              Lorem ipsum dolor sit amet Lorem ipsum dolor sit.
            </SectionFooter>
          </Section>
        </Card>
        <Card colorVariant="white">
          <Banner src="http://media.rtl.fr/cache/rGFoG3N32J0OTqKOhyjU8Q/880v587-0/online/image/2017/0412/7788094382_un-ecureuil-curieux-plonge-sa-tete-dans-une-fleur.jpg" ratio={4 / 3} />
          <Section>
            <SectionTitle>Consectetur adipiscing elit</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et. Sed sit amet metus elit. Cras quis ullamcorper dolor, vel congue justo. Morbi consectetur orci non leo congue, ut tincidunt arcu dapibus.
            </SectionBody>
            <SectionFooter>
              2 weeks 1 day
            </SectionFooter>
          </Section>
        </Card>
      </Cards>
      <p>Items per row auto (max 4) : result 4</p>
      <Cards>
        <Card>
          <Icon src="/pic-battery.svg" />
          <Section>
            <SectionTitle>Lorem ipsum dolor</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
          </Section>
        </Card>
        <Card colorVariant="white">
          <Icon src="/pic-pig.svg" />
          <Section>
            <SectionTitle>Proin sit amet facilisis</SectionTitle>
            <SectionBody>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl
            </SectionBody>
          </Section>
        </Card>
        <Card>
          <Banner src="https://www.chassimages.com/mag/wp-content/uploads/2017/03/ImageJour2903.jpg" ratio={4 / 3} />
          <Section>
            <SectionTitle>Lorem ipsum dolor</SectionTitle>
            <SectionBody>dignissim sit amet, euismod in neque. Proin sit amet facilisis odio</SectionBody>
            <SectionFooter>consectetur adipiscing elit</SectionFooter>
          </Section>
        </Card>
        <Card>
          <Icon src="/pic-battery.svg" />
          <Section>
            <SectionTitle>Lorem ipsum dolor</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
          </Section>
        </Card>
      </Cards>
      <Cards horizontal>
        <Card colorVariant="white">
          <Banner width="300px" type="image" src="http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg" />
          <Section>
            <SectionTitle>LOREM IPSUM DOLOR</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
          </Section>
          <Section>
            <SectionTitle>LOREM IPSUM DOLOR</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
          </Section>
        </Card>
        <Card>
          <Banner width="50%" ratio={4 / 3} type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiClD4gHJhCmAW-Kjz6XnTUooJW44moQ9sTondD2J9IvCPH8yNeQ" />
          <Section>
            <SectionTitle>LOREM IPSUM DOLOR</SectionTitle>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit. consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
            <SectionFooter><TextIcon name="doc" size="sm">1 month 1 week</TextIcon></SectionFooter>
          </Section>
        </Card>
      </Cards>
      <Cards itemsPerRow={3}>
        <Card title="hello" icon="/pic-battery.svg">
          <Icon src="/pic-pig.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
          </Section>
        </Card>
        <Card title="hello world" icon="/pic-pig.svg">
          <Icon src="/pic-battery.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
          </Section>
        </Card>
        <Card title="hello le monde" icon="/pic-pig.svg">
          <Icon src="/pic-pig.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.</SectionBody>
          </Section>
        </Card>
        <Card title="hello le monde" icon="/pic-pig.svg">
          <Icon src="/pic-battery.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
          </Section>
        </Card>
        <Card title="hello world" icon="/pic-pig.svg">
          <Icon src="/pic-pig.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl,</SectionBody>
          </Section>
        </Card>
        <Card title="hello le monde" icon="/pic-pig.svg">
          <Icon src="/pic-battery.svg" />
          <Section>
            <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.</SectionBody>
          </Section>
        </Card>
      </Cards>
    </div>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
