import React from 'react';
import { mount, render } from 'enzyme';

import Menu from '@ui/components/Menu/';
import MenuDivider from '@ui/components/Menu/Divider';
import MenuHeader from '@ui/components/Menu/Header';
import MenuItem from '@ui/components/Menu/Item';

describe('Menu', () => {
  it('displays the <Menu> element', () => {
    const node = render(
      <Menu>
        <MenuItem>Getting Started</MenuItem>
        <MenuItem>General</MenuItem>
        <MenuItem>General Settings</MenuItem>
        <MenuItem>Appearance</MenuItem>
        <MenuItem>Documentation</MenuItem>
      </Menu>
    );
    expect(node.hasClass('Menu')).toBe(true);
  });

  it('displays a <MenuDivider>', () => {
    const node = render(
      <Menu>
        <MenuItem>Getting Started</MenuItem>
        <MenuItem>General</MenuItem>
        <MenuDivider />
        <MenuItem>Appearance</MenuItem>
        <MenuItem>Documentation</MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Divider')).toHaveLength(1);
  });

  it('displays a <MenuHeader>', () => {
    const node = render(
      <Menu>
        <MenuHeader>Support</MenuHeader>
        <MenuItem>Phone</MenuItem>
        <MenuItem>Chat</MenuItem>
        <MenuItem>Email</MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Header')).toHaveLength(1);
  });

  it('displays a blue <Menu-Item>', () => {
    const node = render(
      <Menu>
        <MenuItem color="blue">Blue</MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Item_blue')).toHaveLength(1);
  });

  it('displays a non-default menu item', () => {
    const node = render(
      <Menu>
        <MenuItem TagName="div"></MenuItem>
      </Menu>
    );
    expect(node.find('div.Menu-Item')).toHaveLength(1);
  });

  it('displays a disabled menu item', () => {
    const node = render(
      <Menu>
        <MenuItem disabled></MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Item_link_disabled')).toHaveLength(1);
  });

  it('displays a menu item with an icon', () => {
    const node = render(
      <Menu>
        <MenuItem icon="fa fa-ban">Icon</MenuItem>
      </Menu>
    );
    expect(node.find('i')).toHaveLength(1);
  });

  it('displays a submenu', () => {
    const node = render(
      <Menu>
        <MenuItem>
          Colors
          <Menu>
            <MenuItem>Red</MenuItem>
            <MenuItem>Blue</MenuItem>
          </Menu>
        </MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Item-SubMenu')).toHaveLength(1);
  });

  it('displays a submenu to the left', () => {
    const node = render(
      <Menu>
        <MenuItem openAt="left">
          Colors
          <Menu>
            <MenuItem>Red</MenuItem>
            <MenuItem>Blue</MenuItem>
          </Menu>
        </MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Item-SubMenu_left')).toHaveLength(1);
  });

  it('should pass toggle value to callback if callback exists', () => {
    const props = { onClick: jest.fn() };
    const node = mount(
      <Menu>
        <MenuItem {...props}>Test</MenuItem>
      </Menu>
    );
    expect(node.find('.Menu-Item')).toHaveLength(1);
    node.find('.Menu-Item').simulate('click');
    expect(props.onClick).toHaveBeenCalled();
  });
});
