import { render, fireEvent, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';

import BaseCard from './BaseCard';

describe('BaseCard', () => {
  const defaultProps = {
    children: 'Test Content',
    testId: 'test-card',
  };

  it('renders', () => {
    const props = {
      ...defaultProps,
      children: 'Test text',
    };
    const { rerender } = render(<BaseCard {...defaultProps}>Test Content</BaseCard>);

    expect(screen.getByTestId('test-card')).toBeInTheDocument();
    expect(screen.getByTestId('test-card')).toHaveClass('np-Card');

    // Change props
    rerender(<BaseCard {...props} />);

    expect(screen.getByText('Test text')).toBeInTheDocument();
  });

  it('is set with class by the `className` prop', () => {
    const props = {
      ...defaultProps,
      className: 'test-custom',
    };
    const { rerender } = render(<BaseCard {...defaultProps} />);

    expect(screen.getByTestId('test-card')).not.toHaveClass('test-custom');

    // Change props
    rerender(<BaseCard {...props} />);

    expect(screen.getByTestId('test-card')).toHaveClass('test-custom');
  });

  it('applies `is-disabled` class when isDisabled is true', () => {
    const props = {
      ...defaultProps,
      isDisabled: true,
    };
    const { rerender } = render(<BaseCard {...defaultProps} />);

    expect(screen.getByTestId('test-card')).not.toHaveClass('is-disabled');

    // Change props
    rerender(<BaseCard {...props} />);

    expect(screen.getByTestId('test-card')).toHaveClass('is-disabled');
  });

  it('applies `np-Card--small` class when isSmall is true', () => {
    const props = {
      ...defaultProps,
      isSmall: true,
    };
    const { rerender } = render(<BaseCard {...defaultProps} />);

    expect(screen.getByTestId('test-card')).not.toHaveClass('np-Card--small');

    // Change props
    rerender(<BaseCard {...props} />);

    expect(screen.getByTestId('test-card')).toHaveClass('np-Card--small');
  });

  it('renders CloseButton and handles onDismiss', () => {
    const mockOnDismiss = jest.fn();
    const props = {
      ...defaultProps,
      onDismiss: mockOnDismiss,
    };
    render(
      <IntlProvider locale="en">
        <BaseCard {...props} />
      </IntlProvider>,
    );

    fireEvent.click(screen.getByTestId('close-button'));

    // onClick function has been called.
    expect(mockOnDismiss).toHaveBeenCalledTimes(1);
  });
});