import React from 'react';
import { fireEvent } from '@testing-library/react';

import userEvent from '@testing-library/user-event';
import renderWithTheme from '../../../../testUtils/renderWithTheme';
import RowAction from '../index';

describe('RowAction', () => {
  describe('when menu has 1 action', () => {
    const clickHandler1 = jest.fn();

    it('renders correctly', () => {
      const { getByText } = renderWithTheme(
        <RowAction
          actions={[
            {
              icon: 'add-person-outlined',
              text: 'View/Edit',
              onClick: clickHandler1,
            },
          ]}
        />
      );
      expect(getByText('View/Edit')).toBeInTheDocument();
    });

    it('triggers onClick when click View/Edit', () => {
      const { getByText } = renderWithTheme(
        <RowAction
          actions={[
            {
              icon: 'add-person-outlined',
              text: 'View/Edit',
              onClick: clickHandler1,
            },
          ]}
        />
      );
      fireEvent.click(getByText('View/Edit'));
      expect(clickHandler1).toHaveBeenCalledTimes(1);
    });
  });

  describe('when menu has more than 1 action', () => {
    const clickHandler = jest.fn();

    it('renders correctly when menu has more than 2 actions', () => {
      const { getByText, getByTestId } = renderWithTheme(
        <RowAction
          actions={[
            {
              icon: 'add-person-outlined',
              text: 'Assign',
            },
            {
              icon: 'pencil-outlined',
              text: 'Edit',
            },
            {
              icon: 'eye-outlined',
              text: 'View',
              onClick: clickHandler,
            },
          ]}
        />
      );
      fireEvent.click(getByTestId('three-dot-button'));
      expect(getByText('Assign')).toBeInTheDocument();
      expect(getByText('Edit')).toBeInTheDocument();
      expect(getByText('View')).toBeInTheDocument();
    });

    it('triggers onClick when click View action', () => {
      const { getByText, getByTestId } = renderWithTheme(
        <RowAction
          actions={[
            {
              icon: 'add-person-outlined',
              text: 'Assign',
            },
            {
              icon: 'pencil-outlined',
              text: 'Edit',
            },
            {
              icon: 'eye-outlined',
              text: 'View',
              onClick: clickHandler,
            },
          ]}
        />
      );
      fireEvent.click(getByTestId('three-dot-button'));
      fireEvent.click(getByText('View'));
      expect(clickHandler).toHaveBeenCalledTimes(1);
    });

    it('click outside the threedot to hide drop action menu', () => {
      const { getByTestId, queryAllByText } = renderWithTheme(
        <RowAction
          actions={[
            {
              icon: 'add-person-outlined',
              text: 'Assign',
            },
            {
              icon: 'pencil-outlined',
              text: 'Edit',
            },
            {
              icon: 'eye-outlined',
              text: 'View',
              onClick: clickHandler,
            },
          ]}
        />
      );
      fireEvent.click(getByTestId('three-dot-button'));
      userEvent.click(document.body);
      expect(queryAllByText('View')).toHaveLength(0);
    });

    it('throws error when there is less than 1 action', () => {
      expect(() => renderWithTheme(<RowAction actions={[]} />)).toThrow(
        `[RowAction] Need at least 1 action to render`
      );
    });
  });
});