import { BadgeProps } from '../badge';
import { Sentiment, Size, ProfileType } from '../common';
import { render, screen, mockMatchMedia } from '../test-utils';

import AvatarWrapper from '.';

mockMatchMedia();

const name = 'Elizabeth Alexandra Mary Windsor';

describe('FlowNavigationAvatar', () => {
  describe('with a name', () => {
    it('shows the initials for a long name', () => {
      render(<AvatarWrapper name={name} />);

      expect(screen.getByText('EW')).toBeInTheDocument();
    });

    it('shows the first letter for a mononym', () => {
      render(<AvatarWrapper name="Zichaleangeol" />);

      expect(screen.getByText('Z')).toBeInTheDocument();
    });

    describe('AND profileType', () => {
      describe('FlowNavigationAvatar', () => {
        describe('with a name', () => {
          it('shows the initials for a long name', () => {
            render(<AvatarWrapper name={name} />);

            expect(screen.getByText('EW')).toBeInTheDocument();
          });

          it('shows the first letter for a mononym', () => {
            render(<AvatarWrapper name="Michelangelo" />);

            expect(screen.getByText('M')).toBeInTheDocument();
          });
        });
      });

      describe('with nothing passed', () => {
        it('renders aria-label', () => {
          render(<AvatarWrapper aria-label="test" />);

          expect(screen.getByLabelText('test')).toBeInTheDocument();
        });
      });

      describe('with a badge status icon passed', () => {
        it('renders the badge', () => {
          render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);

          expect(screen.getByTestId('check-icon')).toBeInTheDocument();
        });

        it('renders aria-label', () => {
          render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} aria-label="test" />);

          expect(screen.getByLabelText('test')).toBeInTheDocument();
        });
      });
    });
  });
});