import React, { useRef } from 'react';
import userEvent from '@testing-library/user-event';

import renderWithTheme from '../../testUtils/renderWithTheme';
import { useDeprecation, useHover } from '../hooks';

describe('useHover', () => {
  it('returns an indicator to show if element is being hovered', () => {
    const TestComponent = () => {
      const componentRef = useRef(null);
      const isHovering = useHover(componentRef);
      return (
        <div data-test-id="test-component" ref={componentRef}>
          {isHovering ? 'Hovered' : 'Not hovered'}
        </div>
      );
    };

    const { getByTestId, getByText } = renderWithTheme(<TestComponent />);

    expect(getByText('Not hovered')).toBeInTheDocument();

    userEvent.hover(getByTestId('test-component'));

    expect(getByText('Hovered')).toBeInTheDocument();

    userEvent.unhover(getByTestId('test-component'));

    expect(getByText('Not hovered')).toBeInTheDocument();
  });
});

describe('useDeprecation', () => {
  describe('with NODE_ENV', () => {
    it('does not warn in production environment', () => {
      process.env['NODE_ENV'] = 'production';
      console.warn = jest.fn();
      const DeprecatedComponent = () => {
        useDeprecation(
          'This component is deprecated. Please use another component instead.'
        );
        return <></>;
      };
      renderWithTheme(<DeprecatedComponent />);

      expect(console.warn).not.toBeCalled();
    });

    it('warns correct message in development environment', () => {
      process.env['NODE_ENV'] = 'development';
      console.warn = jest.fn();

      const DeprecatedComponent = () => {
        useDeprecation(
          'This component is deprecated. Please use another component instead.'
        );
        return <></>;
      };
      renderWithTheme(<DeprecatedComponent />);

      expect(console.warn).toHaveBeenCalledWith(
        `%c
██████╗ ███████╗██████╗ ██████╗ ███████╗ ██████╗ █████╗ ████████╗███████╗██████╗
██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔════╝██╔════╝██╔══██╗╚══██╔══╝██╔════╝██╔══██╗
██║  ██║█████╗  ██████╔╝██████╔╝█████╗  ██║     ███████║   ██║   █████╗  ██║  ██║
██║  ██║██╔══╝  ██╔═══╝ ██╔══██╗██╔══╝  ██║     ██╔══██║   ██║   ██╔══╝  ██║  ██║
██████╔╝███████╗██║     ██║  ██║███████╗╚██████╗██║  ██║   ██║   ███████╗██████╔╝
╚═════╝ ╚══════╝╚═╝     ╚═╝  ╚═╝╚══════╝ ╚═════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═════╝
%cThis component is deprecated. Please use another component instead.`,
        'color: red',
        'color: red; font-size: 15px'
      );
    });
  });

  describe('with 2nd arg', () => {
    it('does not warn when 2nd arg is provided as false', () => {
      process.env['NODE_ENV'] = 'development';
      console.warn = jest.fn();
      const DeprecatedComponent = () => {
        useDeprecation(
          'This component is deprecated. Please use another component instead.',
          false
        );
        return <></>;
      };
      renderWithTheme(<DeprecatedComponent />);

      expect(console.warn).not.toBeCalled();
    });

    it('warns correct message when 2nd arg is provided as true', () => {
      process.env['NODE_ENV'] = 'development';
      console.warn = jest.fn();

      const DeprecatedComponent = () => {
        useDeprecation(
          'This component is deprecated. Please use another component instead.',
          true
        );
        return <></>;
      };
      renderWithTheme(<DeprecatedComponent />);

      expect(console.warn).toHaveBeenCalledWith(
        `%c
██████╗ ███████╗██████╗ ██████╗ ███████╗ ██████╗ █████╗ ████████╗███████╗██████╗
██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔════╝██╔════╝██╔══██╗╚══██╔══╝██╔════╝██╔══██╗
██║  ██║█████╗  ██████╔╝██████╔╝█████╗  ██║     ███████║   ██║   █████╗  ██║  ██║
██║  ██║██╔══╝  ██╔═══╝ ██╔══██╗██╔══╝  ██║     ██╔══██║   ██║   ██╔══╝  ██║  ██║
██████╔╝███████╗██║     ██║  ██║███████╗╚██████╗██║  ██║   ██║   ███████╗██████╔╝
╚═════╝ ╚══════╝╚═╝     ╚═╝  ╚═╝╚══════╝ ╚═════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═════╝
%cThis component is deprecated. Please use another component instead.`,
        'color: red',
        'color: red; font-size: 15px'
      );
    });
  });
});