import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Steps from '../Steps';

const steps: React.ComponentProps<typeof Steps>['steps'] = [
  {
    id: 1,
    status: 'complete',
    text: 'Request a demo',
  },
  {
    id: 2,
    status: 'complete',
    text: 'Choose a plan',
  },
  {
    id: 3,
    status: 'complete',
    text: 'Sign up',
  },
  {
    id: 4,
    status: 'incomplete',
    text: 'Implement',
  },
];

describe('rendering', () => {
  it('renders labels & icons', () => {
    const { getByText, container } = renderWithTheme(
      <Steps steps={steps} current={1} />
    );
    expect(getByText('Request a demo')).toBeInTheDocument();
    expect(getByText('Choose a plan')).toBeInTheDocument();
    expect(getByText('Sign up')).toBeInTheDocument();
    expect(getByText('Implement')).toBeInTheDocument();

    expect(container.querySelectorAll('i')[0]).toHaveClass(
      'hero-icon-checkmark'
    );
    expect(container.querySelectorAll('i')[1]).toHaveClass(
      'hero-icon-circle-ok'
    );
    expect(container.querySelectorAll('i')[2]).toHaveClass(
      'hero-icon-circle-ok'
    );
    expect(container.querySelectorAll('i')[3]).toBeUndefined();
  });
});

describe('interaction', () => {
  it('allows to click on step', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <Steps steps={steps} current={1} onClick={onClick} />
    );
    expect(onClick).not.toHaveBeenCalled();

    fireEvent.click(getByText('Request a demo'));
    expect(onClick).toHaveBeenCalledTimes(1);
    expect(onClick).toHaveBeenLastCalledWith({
      id: 1,
      status: 'complete',
      text: 'Request a demo',
    });

    fireEvent.click(getByText('Choose a plan'));
    expect(onClick).toHaveBeenCalledTimes(2);
    expect(onClick).toHaveBeenLastCalledWith({
      id: 2,
      status: 'complete',
      text: 'Choose a plan',
    });

    fireEvent.click(getByText('Sign up'));
    expect(onClick).toHaveBeenCalledTimes(3);
    expect(onClick).toHaveBeenLastCalledWith({
      id: 3,
      status: 'complete',
      text: 'Sign up',
    });

    fireEvent.click(getByText('Implement'));
    expect(onClick).toHaveBeenCalledTimes(4);
    expect(onClick).toHaveBeenLastCalledWith({
      id: 4,
      status: 'incomplete',
      text: 'Implement',
    });
  });
});