import React from 'react';
import { mockMatchMedia, render, screen } from '../../test-utils';
import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
import { Sentiment } from '../../common';

mockMatchMedia();

describe('InlinePrompt', () => {
  const defaultProps: InlinePromptProps = {
    children: 'Prompt message',
  };

  it('renders children', () => {
    render(<InlinePrompt {...defaultProps}>Hello world</InlinePrompt>);
    expect(screen.getByText('Hello world')).toBeInTheDocument();
  });

  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
    render(<InlinePrompt {...defaultProps} sentiment="proposition" />);
    expect(screen.getByText('Prompt message')).toBeInTheDocument();
    expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
  });

  describe('renders with each sentiment', () => {
    it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
      'renders with sentiment %s',
      (sentiment) => {
        render(
          <InlinePrompt
            {...defaultProps}
            sentiment={sentiment as InlinePromptProps['sentiment']}
          />,
        );
        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
          `wds-inline-prompt--${sentiment}`,
        );
      },
    );
  });

  it('renders muted state', () => {
    render(<InlinePrompt {...defaultProps} muted />);
    screen.debug(undefined, 99999999);
    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
      'wds-inline-prompt--muted',
    );
    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
  });

  it('renders loading state', () => {
    render(<InlinePrompt {...defaultProps} loading />);
    screen.debug(undefined, 99999999);
    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
      'wds-inline-prompt--loading',
    );
    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
  });

  it('applies custom className, id, and data-testid', () => {
    render(
      <InlinePrompt
        {...defaultProps}
        className="custom-class"
        id="custom-id"
        data-testid="custom-test"
      />,
    );
    const el = screen.getByTestId('custom-test');
    expect(el).toHaveClass('custom-class');
    expect(el).toHaveAttribute('id', 'custom-id');
  });
});
