import React from 'react';
import { injectIntl } from 'react-intl';
import '@testing-library/jest-dom';
import cloneDeep from 'lodash/cloneDeep';
import { BrowserRouter as Router } from 'react-router-dom';
import { render, screen } from '../../../utils/test-utils';

import { NavigationBar } from '../index';
import * as mockdata from './mockData';
import { Provider } from 'react-redux';
import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
import history from '../../../utils/history';
import { initialReducer } from '../../../initialReducer';
const { userData } = mockdata;

let store;
beforeAll(() => {
  store = configureStore({}, initialReducer, history);
});
const ComponentToRender = injectIntl(NavigationBar);
const renderComponent = (props) => {
  render(
    <Provider store={store}>
      <Router>
        <ComponentToRender {...props} />
      </Router>
    </Provider>
  );
};
describe('NavigationBar', () => {
  const props = {
    topbarMenuData: [{}],
    history: [{}],
    userData,
    loggedIn: true,
    isCreativesAccessible: true,
    campaignOrgV2Status: true,
    location: {
      pathname: "v2",
      key: "g9d1jt",
      basename: "/creatives/ui/",
    },
  };

  it('Show aria documentation bot icon if showDocumentationBot is true', () => {
    renderComponent(props);
    const ariaBotIcon = screen.getByLabelText('open-aira');
    expect(ariaBotIcon).toBeInTheDocument();
  });

  it('Should not show aria documentation bot icon if showDocumentationBot is false', () => {
    const updatedProps = cloneDeep(props);
    delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
    renderComponent(updatedProps);
    const ariaBotIcon = screen.queryByLabelText('open-aira');
    expect(ariaBotIcon).toBeInTheDocument();
  });
  
  it('Should contains top vertical', () => {
    const updatedProps = {...props} ;
    delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
    renderComponent(updatedProps);
    const topVaerticalBar = document.querySelector('.cap-top-bar-vertical');
    expect(topVaerticalBar).toBeInTheDocument();
  });
  it('Should have loyalty product selected', () => {
    const updatedProps = {...props};
    updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
    renderComponent(updatedProps);
    const loyaltyProduct = screen.getByText('Loyalty+');
    expect(loyaltyProduct).toBeInTheDocument();
  });
});
