import { render, screen, testWithFeatureToggles } from 'test/test-utils';
import { byRole } from 'testing-library-selector';

import HistoryPage from './CentralAlertHistoryPage';

jest.mock('./CentralAlertHistoryScene', () => ({
  CentralAlertHistoryScene: () => <div data-testid="alert-events-scene">Alert Events Scene</div>,
}));

jest.mock('../../../notifications/NotificationsScene', () => ({
  NotificationsScene: () => <div data-testid="notifications-scene">Notifications Scene</div>,
}));

const ui = {
  alertEventsTab: byRole('tab', { name: /alert events/i }),
  notificationsTab: byRole('tab', { name: /notifications/i }),
  alertEventsDescription: () =>
    screen.queryByText(/view a history of all alert events generated by your grafana-managed alert rules/i),
  notificationsDescription: () =>
    screen.queryByText(/view a history of all notifications sent from your grafana-managed alert rules/i),
  alertEventsScene: () => screen.queryByTestId('alert-events-scene'),
  notificationsScene: () => screen.queryByTestId('notifications-scene'),
};

function renderHistoryPage(initialUrl = '/alerting/history') {
  return render(<HistoryPage />, {
    historyOptions: { initialEntries: [initialUrl] },
  });
}

describe('CentralAlertHistoryPage', () => {
  describe('when alertingNotificationHistoryGlobal is disabled', () => {
    it('should not render tabs', () => {
      renderHistoryPage();

      expect(ui.alertEventsTab.query()).not.toBeInTheDocument();
      expect(ui.notificationsTab.query()).not.toBeInTheDocument();
    });

    it('should render alert events scene and description', () => {
      renderHistoryPage();

      expect(ui.alertEventsDescription()).toBeInTheDocument();
      expect(ui.alertEventsScene()).toBeInTheDocument();
    });

    it('should ignore ?tab=notifications and still show alert events', () => {
      renderHistoryPage('/alerting/history?tab=notifications');

      expect(ui.alertEventsDescription()).toBeInTheDocument();
      expect(ui.alertEventsScene()).toBeInTheDocument();
      expect(ui.notificationsScene()).not.toBeInTheDocument();
    });
  });

  describe('when alertingNotificationHistoryGlobal is enabled', () => {
    testWithFeatureToggles({ enable: ['alertingNotificationHistoryGlobal'] });

    it('should render both tabs', () => {
      renderHistoryPage();

      expect(ui.alertEventsTab.get()).toBeInTheDocument();
      expect(ui.notificationsTab.get()).toBeInTheDocument();
    });

    it('should default to alert events tab', () => {
      renderHistoryPage();

      expect(ui.alertEventsTab.get()).toHaveAttribute('aria-selected', 'true');
      expect(ui.alertEventsDescription()).toBeInTheDocument();
      expect(ui.alertEventsScene()).toBeInTheDocument();
      expect(ui.notificationsScene()).not.toBeInTheDocument();
    });

    it('should show notifications when ?tab=notifications', () => {
      renderHistoryPage('/alerting/history?tab=notifications');

      expect(ui.notificationsTab.get()).toHaveAttribute('aria-selected', 'true');
      expect(ui.notificationsDescription()).toBeInTheDocument();
      expect(ui.notificationsScene()).toBeInTheDocument();
      expect(ui.alertEventsScene()).not.toBeInTheDocument();
    });

    it('should switch to notifications tab on click', async () => {
      const { user } = renderHistoryPage();

      expect(ui.alertEventsScene()).toBeInTheDocument();

      await user.click(ui.notificationsTab.get());

      expect(ui.notificationsScene()).toBeInTheDocument();
      expect(ui.alertEventsScene()).not.toBeInTheDocument();
    });

    it('should switch back to alert events tab on click', async () => {
      const { user } = renderHistoryPage('/alerting/history?tab=notifications');

      expect(ui.notificationsScene()).toBeInTheDocument();

      await user.click(ui.alertEventsTab.get());

      expect(ui.alertEventsScene()).toBeInTheDocument();
      expect(ui.notificationsScene()).not.toBeInTheDocument();
    });
  });
});
