import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MemoryRouter } from 'react-router-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import NavBar from '@/components/layout/Navbar/Navbar';
import { Provider } from 'react-redux';
import { store } from '@/state/store';

const baseProps = {
  isAuthenticated: true,
  hasBlog: true,
  userName: 'alice',
  userAvatar: '',
  blog: { blogId: 'q-blog-a' },
  authenticate: vi.fn(),
  hasAttemptedToFetchBlogInitial: true,
  allNames: [],
  onSwitchActiveName: vi.fn(),
};

describe('Navbar multiblog', () => {
  it('shows Create Blog in main menu when user has 0 blogs', () => {
    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter>
            <NavBar {...baseProps} userBlogs={[]} />
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );
    fireEvent.click(screen.getByText('Menu'));
    expect(screen.getByText('Create Blog')).toBeInTheDocument();
  });

  it('shows My Blogs section in main menu when user has >=1 blogs', () => {
    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter>
            <NavBar
              {...baseProps}
              userBlogs={[{ name: 'alice', blogId: 'q-blog-a', handle: 'a', title: 'A' }]}
            />
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );
    fireEvent.click(screen.getByText('Menu'));
    expect(screen.getByText('My Blogs')).toBeInTheDocument();
  });
});