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('AND profileType', () => {
            it('renders as BUSINESS profile type with an icon', () => {
              const { container } = render(
                <AvatarWrapper name={name} profileType={ProfileType.BUSINESS} />,
              );

              expect(container.firstChild).toMatchSnapshot();
            });

            it('renders as PERSONAL profile type with an icon', () => {
              const { container } = render(
                <AvatarWrapper name={name} profileType={ProfileType.PERSONAL} />,
              );

              expect(container.firstChild).toMatchSnapshot();
            });

            describe('AND avatar url', () => {
              it('renders the image', () => {
                const { container } = render(
                  <AvatarWrapper
                    url="https://wise.com"
                    name={name}
                    profileType={ProfileType.BUSINESS}
                    avatarProps={{ theme: 'dark' }}
                  />,
                );

                expect(container.firstChild).toMatchSnapshot();
              });
            });
          });
        });
      });

      describe('with nothing passed', () => {
        it('renders a personal icon', () => {
          const { container } = render(<AvatarWrapper />);

          expect(container.firstChild).toMatchSnapshot();
        });

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

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

      describe('with a badge url passed', () => {
        it('renders the badge', () => {
          const { container } = render(
            <AvatarWrapper
              badgeUrl="https://badge.com"
              badgeAltText="badge alt text"
              badgeProps={{ size: Size.LARGE } as BadgeProps}
            />,
          );

          expect(container.firstChild).toMatchSnapshot();
        });
      });

      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();
        });
      });
    });
  });
});
