import { render, screen } from '../test-utils';
import SentimentSurface from './SentimentSurface';
import { Sentiment, Emphasis } from './SentimentSurface.types';

describe('SentimentSurface', () => {
  const testContent = 'Test content';

  describe('rendering', () => {
    it('renders with children', () => {
      render(<SentimentSurface sentiment="neutral">{testContent}</SentimentSurface>);
      expect(screen.getByText(testContent)).toBeInTheDocument();
    });

    it('renders as div by default', () => {
      render(
        <SentimentSurface sentiment="neutral" data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface').tagName).toBe('DIV');
    });

    it('renders as custom element when as prop is provided', () => {
      render(
        <SentimentSurface sentiment="neutral" as="section" data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface').tagName).toBe('SECTION');
    });
  });

  describe('hasBaseStyles', () => {
    it('applies base styles by default', () => {
      render(
        <SentimentSurface sentiment="neutral" data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).toHaveClass('wds-sentiment-surface--hasBaseStyles');
    });

    it('does not apply base styles when hasBaseStyles is false', () => {
      render(
        <SentimentSurface sentiment="neutral" hasBaseStyles={false} data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).not.toHaveClass('wds-sentiment-surface--hasBaseStyles');
    });
  });

  describe('sentiment variants', () => {
    const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];

    sentiments.forEach((sentiment) => {
      it(`renders ${sentiment} sentiment with correct class`, () => {
        render(
          <SentimentSurface sentiment={sentiment} data-testid="surface">
            {testContent}
          </SentimentSurface>,
        );
        const element = screen.getByTestId('surface');
        expect(element).toHaveClass('wds-sentiment-surface');
        expect(element).toHaveClass(`wds-sentiment-surface-${sentiment}-base`);
      });
    });
  });

  describe('emphasis variants', () => {
    const emphasisLevels: Emphasis[] = ['base', 'elevated'];

    emphasisLevels.forEach((emphasis) => {
      it(`renders ${emphasis} emphasis with correct class`, () => {
        render(
          <SentimentSurface sentiment="neutral" emphasis={emphasis} data-testid="surface">
            {testContent}
          </SentimentSurface>,
        );
        const element = screen.getByTestId('surface');
        expect(element).toHaveClass('wds-sentiment-surface');
        expect(element).toHaveClass(`wds-sentiment-surface-neutral-${emphasis}`);
      });
    });

    it('defaults to base emphasis when not provided', () => {
      render(
        <SentimentSurface sentiment="neutral" data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      const element = screen.getByTestId('surface');
      expect(element).toHaveClass('wds-sentiment-surface');
      expect(element).toHaveClass('wds-sentiment-surface-neutral-base');
    });
  });

  describe('custom props', () => {
    it('applies custom className', () => {
      const customClass = 'custom-class';
      render(
        <SentimentSurface sentiment="neutral" className={customClass} data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).toHaveClass(customClass);
    });

    it('applies custom id', () => {
      const customId = 'custom-id';
      render(
        <SentimentSurface sentiment="neutral" id={customId}>
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByText(testContent)).toHaveAttribute('id', customId);
    });

    it('applies data-testid attribute', () => {
      const testId = 'test-surface';
      render(
        <SentimentSurface sentiment="neutral" data-testid={testId}>
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId(testId)).toBeInTheDocument();
    });

    it('applies custom style', () => {
      const customStyle = { padding: '20px' };
      render(
        <SentimentSurface sentiment="neutral" style={customStyle} data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).toHaveStyle(customStyle);
    });
  });

  describe('HTML attributes', () => {
    it('supports aria-label attribute', () => {
      const ariaLabel = 'Surface label';
      render(
        <SentimentSurface sentiment="neutral" aria-label={ariaLabel} data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).toHaveAttribute('aria-label', ariaLabel);
    });

    it('supports role attribute', () => {
      render(
        <SentimentSurface sentiment="neutral" role="region" data-testid="surface">
          {testContent}
        </SentimentSurface>,
      );
      expect(screen.getByTestId('surface')).toHaveAttribute('role', 'region');
    });
  });
});