import * as React from 'react';
import UserMenu from '../UserMenu';
import {act, fireEvent, render} from '../../../test-utils';
import {ProfileMenu} from '../../types';
import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
import { NavigationProvider } from '../../../Navigation/NavigationProvider';



describe('UserMenu', () => {

  const navProps = {
    currentPath: '',
    isActiveRoute: () => false,
    navigate: (path: string, isExternal: boolean) => {}
  };

  it('should render profile icon', function () {
    const props: ProfileMenu = {
      user: {
        firstName: 'John',
        lastName: 'Doe',
        email: 'email'
      },
      sections: []
    }
    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);

    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);

    wrapper.unmount();
  });

  it('should render label', function () {
    const props: ProfileMenu = {
      user: {
        firstName: 'John',
        lastName: 'Doe',
        email: 'email'
      },
      sections: [],
      label: 'label'
    }
    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);

    expect(wrapper.findByText('label')).toBeDefined();

    wrapper.unmount();
  });

  it('should render sign out button', function () {
    const props: ProfileMenu = {
      user: {
        firstName: 'John',
        lastName: 'Doe',
        email: 'email'
      },
      sections: [],
      signOut: {
        action: jest.fn(),
        label: 'sign out'
      }
    }
    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);

    expect(wrapper.findByText('sign out')).toBeDefined();

    wrapper.unmount();
  });

  it('should render sections', function () {
    const props: ProfileMenu = {
      user: {
        firstName: 'John',
        lastName: 'Doe',
        email: 'email'
      },
      sections: [{
        label: 'label',
        items: [{
          label: 'item1',
          to: '#'
        }]
      }],
    }
    const wrapper = render(<NavigationProvider {...navProps}>
      <UserMenu {...props} onHideUserMenu={jest.fn()}/>
    </NavigationProvider>);

    expect(wrapper.getByText('item1')).toBeDefined();
    expect(wrapper.getByText('label')).toBeDefined();

    wrapper.unmount();
  });

  it('should close when item is clicked', async function () {
    const props: ProfileMenu = {
      user: {
        firstName: 'John',
        lastName: 'Doe',
        email: 'email'
      },
      sections: [{
        label: 'label',
        items: [{
          label: 'item1',
          to: 'http://localhost',
          external: true
        }]
      }],
    };

    const onClose = jest.fn();
    const wrapper = render(<NavigationProvider {...navProps}> <UserMenu {...props} onHideUserMenu={onClose}/> </NavigationProvider>);

    act(() => {
      fireEvent.click(wrapper.getByText('item1'));
    })

    expect(onClose).toHaveBeenCalled();

    wrapper.unmount();
  });

});