import React from 'react';
import { customRender, fireEvent } from 'test-utils';
import AppSwitcher from '.';

const renderDefault = (props = {}) =>
  customRender(<AppSwitcher triggerProps={{ 'data-testid': 'current-project-btn' }} {...props} />);

describe('<SidebarAppSwitcher />', () => {
  describe('when not passing canSwitchTo', () => {
    it('should not make the current product logo clickable', () => {
      const { getByTestId, queryByTitle } = renderDefault({ currentProduct: 'ecom' });
      const triggerBtn = getByTestId('current-project-btn');

      fireEvent.click(triggerBtn);

      expect(triggerBtn).not.toHaveAttribute('href');
      expect(queryByTitle('retail-button')).toBeNull();
    });
  });

  describe('when passing canSwitchTo and clicking on the current product', () => {
    it('should show the product menu', () => {
      const { getByTestId, getByTitle, queryByTitle } = renderDefault({
        currentProduct: 'ecom',
        canSwitchTo: [
          { name: 'retail', href: '/retail', title: 'retail-button' },
          { name: 'ecom', href: '/ecom', title: 'ecom-button' },
        ],
      });

      // No menu
      expect(queryByTitle('retail-button')).toBeNull();

      // Click on current product
      fireEvent.click(getByTestId('current-project-btn'));

      // Should have menu
      const retailMenuItem = getByTitle('retail-button');
      expect(retailMenuItem).toHaveAttribute('href', '/retail');
    });

    it('should always filter out the current product from the list', () => {
      const { getByTestId, queryByTitle } = renderDefault({
        currentProduct: 'ecom',
        canSwitchTo: [
          { name: 'retail', href: '/retail', title: 'retail-button' },
          { name: 'ecom', href: '/ecom', title: 'ecom-button' },
        ],
      });
      fireEvent.click(getByTestId('current-project-btn'));

      // eCom menu item should not be there
      const eComMenuItem = queryByTitle('ecom-button');
      expect(eComMenuItem).toBeNull();
    });

    it('should close the menu when clicking on a different app', () => {
      const ecomOnClick = jest.fn();
      const { getByTestId, queryByTitle } = renderDefault({
        currentProduct: 'retail',
        canSwitchTo: [
          { name: 'retail', href: '/retail', title: 'retail-button' },
          { name: 'ecom', href: '/ecom', title: 'ecom-button', onClick: ecomOnClick },
        ],
      });
      fireEvent.click(getByTestId('current-project-btn'));

      expect(ecomOnClick).not.toHaveBeenCalled();

      // Click on the ecom button
      fireEvent.click(queryByTitle('ecom-button'));

      // Menu should be closed and onClick should've been called
      expect(queryByTitle('ecom-button')).toBeNull();
      expect(ecomOnClick).toHaveBeenCalledTimes(1);
    });
  });

  describe('when passing an appsConfig', () => {
    const customProductImage = <div>Sick logo</div>;

    it('should be able to use custom products as currentProduct', () => {
      const appsConfig = { customProduct: customProductImage };
      const { queryByText } = renderDefault({
        appsConfig,
        currentProduct: 'customProduct',
      });

      expect(queryByText('Sick logo')).not.toBeNull();
    });

    it('should be able to still use the default apps', () => {
      const appsConfig = { customProduct: customProductImage };
      const { getByTestId } = renderDefault({
        appsConfig,
        currentProduct: 'ecom',
      });
      const triggerBtn = getByTestId('current-project-btn');

      expect(triggerBtn).not.toBeNull();
    });

    it('should be able to switch to this product', () => {
      const appsConfig = { customProduct: customProductImage };
      const { getByTestId, queryByTitle } = renderDefault({
        appsConfig,
        currentProduct: 'ecom',
        canSwitchTo: [
          { name: 'retail', href: '/retail', title: 'retail-button' },
          { name: 'ecom', href: '/ecom', title: 'ecom-button' },
          { name: 'customProduct', href: '/ecom', title: 'custom-product-button' },
        ],
      });
      fireEvent.click(getByTestId('current-project-btn'));

      // customProduct menu item should not be there
      const customProductMenuItem = queryByTitle('custom-product-button');
      expect(customProductMenuItem).not.toBeNull();
    });
  });

  describe('when passing logoProps', () => {
    it('should pass the props to the link around the logo', () => {
      const { getByTitle } = renderDefault({
        currentProduct: 'ecom',
        logoProps: { title: 'lightspeed-logo', href: '/some-url' },
      });

      const logoLink = getByTitle('lightspeed-logo');
      expect(logoLink).toHaveAttribute('href', '/some-url');
    });
  });
});