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

import Collapsible from './index';
import Title from '../Title';
import Article from '../Article';
import Icon from '../Icon';

test('Cropper renders correctly', () => {
  const items = [
    { id: 'sigfox', name: 'Sigfox', description: 'Aliquam vestibulum a nisl sit amet imperdiet.' },
    { id: 'study', name: 'Qualification', description: 'Aenean at neque dolor. Aliquam id ipsum quis quam.' },
    { id: 'start', name: 'Prototyping', description: 'Cras sodales vel mi vitae semper. Curabitur dictum.' },
    { id: 'development', name: 'Development', description: 'Sed at pretium ante, vel dignissim nibh..' },
    { id: 'certification', name: 'Certification', description: 'Nam ullamcorper pharetra quam fringilla efficitur.' },
    { id: 'industrialization', name: 'Industrialization', description: 'Maecenas pulvinar imperdiet tincidunt.' },
    { id: 'user', name: 'My user', description: 'Vestibulum commodo orci mauris, non tempor leo consequat ac.' },
    { id: 'device', name: 'My device', description: 'Sed sit amet libero in justo viverra auctor eget sit amet odio.' },
    { id: 'briefcase', name: 'My project', description: 'Duis consequat libero sit amet massa mattis feugiat.' },
    { id: 'company', name: 'My company', description: 'Donec eleifend justo augue. Vivamus magna neque, ullamcorper.' },
    { id: 'wrench', name: 'My admin', description: 'Duis accumsan sagittis rhoncus. Integer condimentum.' }
  ];

  const tree = renderer.create(
    <Collapsible
      items={items}
      itemRender={({ id }) => (
        <Icon
          name={id}
          variant="circle"
          size="md"
          backgroundColor="x-light-grey"
          borderColor="light-grey"
          color="dark-grey"
        />
      )}
      selectedId="study"
      columns="5"
      collapse={false}
      scrollJump
    >
      {({ name, description }) => (
        <div>
          <Title level={4} withoutMargeTop>{name}</Title>
          <Article>{description}</Article>
        </div>
      )}
    </Collapsible>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
