import React from 'react';
import { vi, describe, expect, test, beforeEach } from 'vitest';
import { screen, within } from '@testing-library/react';
import { useConfig } from '@openmrs/esm-framework';
import { ErrorState } from '@openmrs/esm-patient-common-lib';
import { mockVisitNotes, ConfigMock } from '__mocks__';
import { mockPatient, patientChartBasePath, renderWithSwr } from 'tools';
import { useVisitNotes } from './visit-notes.resource';
import NotesOverview from './notes-overview.extension';

const testProps = {
  basePath: patientChartBasePath,
  patient: mockPatient,
  patientUuid: mockPatient.id,
};

const mockUseVisitNotes = vi.mocked(useVisitNotes);
const mockUseConfig = vi.mocked(useConfig);

vi.mock('./visit-notes.resource', () => {
  return { useVisitNotes: vi.fn().mockReturnValue([{}]) };
});

describe('NotesOverview', () => {
  beforeEach(() => {
    mockUseConfig.mockReturnValue(ConfigMock);
  });

  test('renders an empty state view if visit note data is unavailable', async () => {
    mockUseVisitNotes.mockReturnValueOnce({
      visitNotes: [],
      error: null,
      isLoading: false,
      isValidating: false,
      mutateVisitNotes: vi.fn(),
    });

    renderWithSwr(<NotesOverview {...testProps} />);

    expect(screen.queryByRole('table')).not.toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /notes/i })).toBeInTheDocument();
    expect(screen.getByText(/There are no visit notes to display for this patient/i)).toBeInTheDocument();
    expect(screen.getByText(/Record visit notes/i)).toBeInTheDocument();
  });

  test('renders an error state view if there is a problem fetching visit note data', async () => {
    const error = {
      name: 'Error',
      message: 'You are not logged in',
      response: {
        status: 401,
        statusText: 'Unauthorized',
      },
    };

    mockUseVisitNotes.mockReturnValueOnce({
      visitNotes: [],
      error: error,
      isLoading: false,
      isValidating: false,
      mutateVisitNotes: vi.fn(),
    });

    renderWithSwr(<NotesOverview {...testProps} />);

    expect(screen.queryByRole('table')).not.toBeInTheDocument();
    expect(ErrorState).toHaveBeenCalledWith(expect.objectContaining({ error, headerTitle: 'Visit notes' }), {});
  });

  test("renders a tabular overview of the patient's visit notes when present", async () => {
    mockUseVisitNotes.mockReturnValueOnce({
      visitNotes: mockVisitNotes,
      error: null,
      isLoading: false,
      isValidating: false,
      mutateVisitNotes: vi.fn(),
    });

    renderWithSwr(<NotesOverview {...testProps} />);

    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /notes/i })).toBeInTheDocument();

    const table = screen.getByRole('table');

    const expectedColumnHeaders = [/Date/, /Diagnoses/];
    expectedColumnHeaders.forEach((header) => {
      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
    });

    const expectedTableRows = [
      /27 — Jan — 2022 Malaria, Primary respiratory tuberculosis, confirmed/,
      /14 — Jan — 2022 Visit Diagnoses: Presumed diagnosis, Malaria, Primary/,
      /14 — Jan — 2022 Visit Diagnoses: Presumed diagnosis, Hemorrhage in early pregnancy, Primary/,
    ];

    expectedTableRows.map((row) =>
      expect(within(table).getByRole('row', { name: new RegExp(row, 'i') })).toBeInTheDocument(),
    );
  });
});