import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { BrowserRouter } from 'react-router-dom';

import { ASSETS_URL } from '../../consts/common';
import { UserControls } from './user-controls';
import type { UserControlsProps } from './types';

afterEach(cleanup);

const mockUser: UserControlsProps = {
  name: 'Mock User',
  userRole: 'Admin'
};

describe('<UserControls />', () => {
  it(`Should render UserControls`, () => {
    const { queryByTestId } = render(
      <BrowserRouter>
        <UserControls {...mockUser} />
      </BrowserRouter>
    );
    expect(queryByTestId('button-userInfo')?.textContent).toBe(mockUser.name + mockUser.userRole);
  });

  it(`Should render without search icon`, () => {
    const { queryByTestId } = render(
      <BrowserRouter>
        <UserControls {...mockUser} showIconSearch={false} />
      </BrowserRouter>
    );
    expect(queryByTestId('button-search')).toBeNull();
    expect(queryByTestId('link-settings')).toBeTruthy();
  });

  it(`Should render without settings icon`, () => {
    const { queryByTestId } = render(
      <BrowserRouter>
        <UserControls {...mockUser} showIconSettings={false} />
      </BrowserRouter>
    );
    expect(queryByTestId('button-search')).toBeTruthy();
    expect(queryByTestId('link-settings')).toBeNull();
  });

  it(`Should render with badge count 0`, () => {
    // eslint-disable-next-line react/jsx-props-no-spreading
    render(
      <BrowserRouter>
        <UserControls {...mockUser} notificationBadgeProps={{ badgeContent: 0 }} />
      </BrowserRouter>
    );
  });

  it(`Should render with badge count 10`, () => {
    // eslint-disable-next-line react/jsx-props-no-spreading
    render(
      <BrowserRouter>
        <UserControls {...mockUser} notificationBadgeProps={{ badgeContent: 10 }} />
      </BrowserRouter>
    );
  });

  it(`Should render with badge count 100`, () => {
    // eslint-disable-next-line react/jsx-props-no-spreading
    render(
      <BrowserRouter>
        <UserControls {...mockUser} notificationBadgeProps={{ badgeContent: 100 }} />
      </BrowserRouter>
    );
  });

  it(`Should render with dividers and buttons`, () => {
    const iconButtons = [
      {
        title: 'Text only'
      },
      {
        icon: {
          src: `${ASSETS_URL}/icons/icon_linux.svg`
        },
        onClick: () => alert('Icon is clicked!')
      },
      {
        href: '/help',
        title: 'Text with link'
      },
      {
        icon: {
          src: `${ASSETS_URL}/icons/icon_linux.svg`
        },
        title: 'Icon with text'
      },
      {
        href: '/help',
        icon: {
          src: `${ASSETS_URL}/icons/icon_linux.svg`
        },
        title: 'Icon with text and link'
      }
    ];
    const { queryByTestId } = render(
      <BrowserRouter>
        <UserControls {...mockUser} showDividers={true} iconButtons={iconButtons} />
      </BrowserRouter>
    );
    expect(queryByTestId('iconsContainer')?.textContent).toBe(
      iconButtons.map(item => item.title).join('')
    );
  });

  it(`Should click on user arrow`, () => {
    const userArrowCallback = jest.fn();
    const { queryByTestId } = render(
      <BrowserRouter>
        <UserControls
          {...mockUser}
          userArrowCallback={userArrowCallback}
          notificationBadgeProps={{ badgeContent: 100 }}
        />
      </BrowserRouter>
    );

    const el = queryByTestId('button-userInfo');
    el?.click();
    expect(userArrowCallback).toHaveBeenCalled();
  });
});