import { expect, test, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import DrugDetails from '../src/components/Details/DrugDetails';
import React from 'react';
import routes from '../src/constants/routes';
import drugs from '../src/constants/mock_data';
import { Provider } from 'react-redux';
import { store } from '../src/redux/store';

const mockedUseNavigate = vi.fn(() => {
  return (path: string) => {
    return routes[path];
  };
});
vi.mock('react-router-dom', async () => {
  const mod = await vi.importActual<typeof import('react-router-dom')>(
    'react-router-dom'
  );
  return {
    ...mod,
    useNavigate: () => mockedUseNavigate,
    useParams: () => ({ id: '1' })
  };
});

vi.mock('react-redux', async () => {
  const mod = await vi.importActual<typeof import('react-redux')>(
    'react-redux'
  );
  return {
    ...mod,
    useSelector: () => drugs[0]
  };
});

test('DrugDetails renders correctly', () => {
  render(
    <Provider store={store}>
      <DrugDetails />
    </Provider>
  );
  expect(screen.getByText('Paracetamol')).toBeTruthy();
  expect(screen.getByText('$5')).toBeTruthy();
  expect(
    screen.getByText(
      'Paracetamol is a painkiller and can be used to relieve mild to moderate pain. It can also reduce high temperatures (fever).'
    )
  ).toBeTruthy();
});

test('DrugDetails back button works correctly', () => {
  render(<DrugDetails />);
  fireEvent.click(screen.getByText('Back'));
  expect(mockedUseNavigate).toHaveBeenCalledWith(-1);
});