import { render } from '../../utils/theme-render-wrapper';
import { BrowserRouter } from 'react-router-dom';
import { RightSideBarProvider } from '../right-sidebar';

import { ThemeProvider } from '../@styles/theme-provider';
import { Layout } from './layout';
import type { LayoutProps } from './types';

const mockHandler = jest.fn();
const layoutContent = 'content';
const layoutHeaderProps: LayoutProps['headerProps'] = {
  breadcrumbsProps: {
    pathname: '',
    sidebarItemsMap: {}
  },
  userControlsProps: {
    name: '',
    userRole: 'Admin'
  }
};
const defaultSidebarProps: LayoutProps['sidebarProps'] = {
  sidebarItemsMap: {},
  logo: ''
};
const lockedSidebarProps: LayoutProps['sidebarProps'] = {
  open: 'closed',
  setOpen: mockHandler,
  sidebarItemsMap: {},
  logo: ''
};

describe('<Layout />', () => {
  it('should render layout with default (locked) sidebar', () => {
    render(
      <BrowserRouter>
        <RightSideBarProvider>
          <ThemeProvider>
            <Layout headerProps={layoutHeaderProps} sidebarProps={defaultSidebarProps}>
              {layoutContent}
            </Layout>
          </ThemeProvider>
        </RightSideBarProvider>
      </BrowserRouter>
    );
  });

  it('should render layout with closed sidebar and click to open', () => {
    const { queryByTestId } = render(
      <BrowserRouter>
        <RightSideBarProvider>
          <ThemeProvider>
            <Layout
              children={layoutContent}
              headerProps={layoutHeaderProps}
              sidebarProps={lockedSidebarProps}
            />
          </ThemeProvider>
        </RightSideBarProvider>
      </BrowserRouter>
    );

    const buttonEl = queryByTestId('button-drawerLeft');
    buttonEl?.click();
    expect(mockHandler).toHaveBeenCalled();
  });

  it("should render layout without right sidebar or it's button", () => {
    const { queryByTestId } = render(
      <BrowserRouter>
        <RightSideBarProvider>
          <ThemeProvider>
            <Layout
              children={layoutContent}
              headerProps={layoutHeaderProps}
              sidebarProps={lockedSidebarProps}
            />
          </ThemeProvider>
        </RightSideBarProvider>
      </BrowserRouter>
    );

    const buttonEl = queryByTestId('rightDrawerOpenButton');
    expect(buttonEl).toBeFalsy();
  });
});