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

import { ASSETS_URL } from '../../../consts/common';
import { Modal } from './modal';

afterEach(cleanup);

const handleClose = jest.fn();
const handleVideoBtn = jest.fn();

describe('<Modal />', () => {
  it(`Should render successfully`, () => {
    const { baseElement } = render(<Modal id="1" open={false} onClose={handleClose} />);
    expect(baseElement).toBeTruthy();
  });

  it(`Should render with props, opened`, () => {
    const { queryByTestId } = render(
      <Modal
        id="1"
        open={true}
        onClose={handleClose}
        dialogTitleProps={{
          children: 'Dialog title'
        }}
        dialogContentProps={{
          children: 'Dialog content'
        }}
        dialogActionsProps={{
          children: 'Dialog actions'
        }}
      />
    );

    const closeEl = queryByTestId('close');
    closeEl?.click();

    expect(handleClose).toHaveBeenCalled();
  });

  it(`Should render with icon and title`, () => {
    const { container } = render(
      <Modal
        id="1"
        open={false}
        onClose={handleClose}
        dialogTitleProps={{
          icon: {
            src: `${ASSETS_URL}/icons/icon_database.svg`
          },
          children: 'Dialog title'
        }}
      />
    );

    const iconEl = container.getElementsByTagName('svg');
    expect(iconEl).toBeTruthy();
  });

  it(`Should render with videoUrl and videoBtnTxt`, () => {
    const { queryByTestId } = render(
      <Modal
        id="1"
        open={true}
        onClose={handleClose}
        videoUrl="https://www.youtube.com/embed/etrEBSAnwzg"
        videoBtnEvent={handleVideoBtn}
        videoBtnTxt="Learn More"
      />
    );

    const videoBtnEl = queryByTestId('videoBtn');
    videoBtnEl?.click();

    expect(handleClose).toHaveBeenCalled();
    expect(handleVideoBtn).toHaveBeenCalled();
  });

  it(`Should render with dialogTitleProps, avatarProps and youtubeProps`, () => {
    const title = 'P81 Cybersecurity Experience Platform';
    const { queryAllByTestId } = render(
      <Modal
        id="1"
        open={true}
        onClose={handleClose}
        avatarProps={{
          backgroundColor: '#DC3912',
          initials: 'YT'
        }}
        dialogTitleProps={{
          children: title
        }}
        youtubeProps={{
          title,
          videoId: 'etrEBSAnwzg'
        }}
      />
    );

    const closeEl = queryAllByTestId('close')[0];
    closeEl?.click();

    expect(handleClose).toHaveBeenCalled();
  });
});