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

import Stepper from './index';

const { Step, Steps, StepperContent } = Stepper;

test('Stepper renders correctly', () => {
  const tree = renderer.create(

    <div>
      <Stepper size="md">
        <Steps>
          <Step icon="sigfox" value={{ title: 'What is Sigfox' }} enabled>
            What is Sigfox
          </Step>
          <Step icon="study" value={{ title: 'Qualification' }} enabled>
            Qualification
          </Step>
          <Step icon="start" value={{ title: 'Prototyping' }} enabled>
            Prototyping
          </Step>
          <Step icon="development" value={{ title: 'Development' }} enabled>
            Development
          </Step>
          <Step icon="certification" value={{ title: 'Certification' }} enabled>
            Certification
          </Step>
          <Step icon="industrialization" value={{ title: 'Industrialization' }} enabled>
            Industrialization
          </Step>
        </Steps>
        <StepperContent>
          {value => {
            const { title } = value || {};
            return (
              <div>
                <h1>{title}</h1>
                <p>
                  Lorem ipsum
                </p>
              </div>
            );
          }}
        </StepperContent>
      </Stepper>
      <Stepper size="sm" withBorder>
        <Steps>
          <Step value={{ title: 'What is Sigfox' }} enabled>
            What is Sigfox
          </Step>
          <Step value={{ title: 'Qualification' }} enabled>
            Qualification
          </Step>
          <Step value={{ title: 'Prototyping' }} enabled>
            Prototyping
          </Step>
          <Step value={{ title: 'Development' }} enabled selected>
            Development
          </Step>
          <Step value={{ title: 'Certification' }}>
            Certification
          </Step>
          <Step value={{ title: 'Industrialisation' }}>
            Industrialisation
          </Step>
        </Steps>
        <StepperContent>
          {value => {
            const { title } = value || {};
            return (
              <div>
                <h1>{title}</h1>
                <p>
                  Lorem ipsum
                </p>
              </div>
            );
          }}
        </StepperContent>
      </Stepper>
      <Steps size="sm">
        <Step icon="sigfox" value={{ title: 'What is Sigfox' }} enabled>
          What is Sigfox
        </Step>
        <Step icon="study" value={{ title: 'Qualification' }} enabled>
          Qualification
        </Step>
        <Step icon="start" value={{ title: 'Prototyping' }} enabled>
          Prototyping
        </Step>
      </Steps>
      <Steps size="sm">
        <Step value={{ title: 'What is Sigfox' }} enabled>
          What is Sigfox
        </Step>
        <Step value={{ title: 'Qualification' }} enabled>
          Qualification
        </Step>
        <Step value={{ title: 'Prototyping' }} enabled>
          Prototyping
        </Step>
      </Steps>
      <Steps size="md">
        <Step icon="sigfox" value={{ title: 'What is Sigfox' }} enabled>
          What is Sigfox
        </Step>
        <Step icon="study" value={{ title: 'Qualification' }} enabled>
          Qualification
        </Step>
        <Step icon="start" value={{ title: 'Prototyping' }} enabled>
          Prototyping
        </Step>
      </Steps>
      <Steps size="lg">
        <Step icon="sigfox" value={{ title: 'What is Sigfox' }} enabled>
          What is Sigfox
        </Step>
        <Step icon="study" value={{ title: 'Qualification' }} enabled>
          Qualification
        </Step>
        <Step icon="start" value={{ title: 'Prototyping' }} enabled>
          Prototyping
        </Step>
      </Steps>
    </div>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
