import React from 'react';
import { customRender, fireEvent } from 'test-utils';
import SidebarItem from '.';
import { COLOR_SIDEBAR_ITEM_ACTIVE } from '../../styles/constants';

const renderDefault = (props = {}) => customRender(<SidebarItem {...props} />);

describe('<SidebarItem />', () => {
  it('should render the icon', () => {
    const { getByTitle } = renderDefault({
      icon: <i title="awesome-icon" />,
      children: 'Awesome Title',
    });

    expect(getByTitle('awesome-icon')).toBeInTheDocument();
  });

  it('should allow any props to be passed', () => {
    const { container } = renderDefault({
      icon: <i />,
      href: '/awesome',
      children: 'Awesome title',
      'data-foo': 'bar',
    });

    expect(container.querySelector('[data-foo="bar"]')).toBeInTheDocument();
  });

  describe('when passing "hasSublevel"', () => {
    it('should show a chevron at the end', () => {
      const { container } = customRender(
        <SidebarItem icon={<i />} hasSublevel>
          Awesome Title
        </SidebarItem>,
      );
      const chevronIcon = container.querySelector('[class*="cr-icon"]');

      expect(chevronIcon).toBeInTheDocument();
    });
  });

  describe('when passing active', () => {
    // TODO: There seems to be a bug with `toHaveStyleRule` where it does not find nested styles
    // eslint-disable-next-line jest/no-disabled-tests
    it.skip('should render the sidebar item in blue', () => {
      const { container } = customRender(
        <SidebarItem icon={<i />} active>
          Awesome Title
        </SidebarItem>,
      );
      const itemEl = container.firstChild;

      expect(itemEl).toHaveStyle(`background: ${COLOR_SIDEBAR_ITEM_ACTIVE}`);
    });
  });

  describe('when passing disabled', () => {
    // TODO: There seems to be a bug with `toHaveStyleRule` where it does not find nested styles
    // eslint-disable-next-line jest/no-disabled-tests
    it.skip('should render the sidebar item in 50% opacity', () => {
      const { container } = customRender(
        <SidebarItem icon={<i />} disabled>
          Awesome Title
        </SidebarItem>,
      );
      const itemEl = container.firstChild;

      expect(itemEl).toHaveStyle(`opacity: .5`);
    });

    it('should still allow the user to click on the item', () => {
      const spy = jest.fn();
      const { container } = customRender(
        <SidebarItem icon={<i />} disabled onClick={spy}>
          Awesome Title
        </SidebarItem>,
      );
      const itemEl = container.firstChild;

      expect(spy).toHaveBeenCalledTimes(0);
      // @ts-ignore
      fireEvent.click(itemEl);
      expect(spy).toHaveBeenCalledTimes(1);
    });
  });

  describe('when passing "notifications"', () => {
    it('should render that on the right', () => {
      const { getByTitle } = customRender(
        <SidebarItem icon={<i />} notifications={<div title="awesome-notifications">2</div>}>
          Awesome Title
        </SidebarItem>,
      );

      expect(getByTitle('awesome-notifications')).toBeInTheDocument();
    });
  });
});