import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { noop } from '../../helpers/utils';
import { initializeUi } from '../../initialize';
import { StationError } from '../models';
import { EmptyStation, EmptyStationProps } from './EmptyStation';

describe('EmptyStation', () => {
  global.ResizeObserver = vi.fn().mockImplementation(function () {
    return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
  }) as unknown as typeof ResizeObserver;

  beforeEach(() => {
    initializeUi({
      showNotification: () => {
        // not implemented
        return -1;
      },
      addIndicator: () => {
        return -1;
      },
      removeIndicator: noop,
      on: noop,
      setTitle: noop,
      setSaveIndicator: noop,
    });
  });

  const defaultProps: EmptyStationProps = {
    title: 'test-title',
    subtitle: 'test-subtitle',
  };
  it('renders the component without crashing', () => {
    const { container } = render(<EmptyStation {...defaultProps} />);

    expect(container).toBeTruthy();
  });

  it('renders a PageHeader', () => {
    const { container } = render(<EmptyStation {...defaultProps} />);

    const pageHeader = container.querySelector('[data-test-id="page-header"]');

    expect(pageHeader).toBeInTheDocument();
  });

  describe('station error', () => {
    it('renders a station error, if set', () => {
      const err: StationError = { title: 'test-title' };
      const { container, rerender } = render(
        <EmptyStation {...defaultProps} />,
      );

      let messageBar = screen.queryByTestId('message-title');
      let stationContainer = container.querySelector('.container');

      expect(messageBar).not.toBeInTheDocument();
      expect(stationContainer?.classList.contains('hasStationError')).toBe(
        false,
      );

      rerender(<EmptyStation {...defaultProps} stationError={err} />);

      messageBar = screen.getByTestId('message-title');
      stationContainer = container.querySelector('.container');

      expect(messageBar).toBeInTheDocument();
      expect(messageBar.textContent).toBe(err.title);
      expect(stationContainer?.classList.contains('hasStationError')).toBe(
        true,
      );
    });

    it('renders MessageBar body, if set', () => {
      const err: StationError = { title: 'test-title' };
      const mockBody = 'test-body';
      const { container, rerender } = render(
        <EmptyStation {...defaultProps} stationError={err} />,
      );

      let toggle = screen.queryByTestId('message-bar-details-button');

      expect(toggle).not.toBeInTheDocument();

      rerender(
        <EmptyStation
          {...defaultProps}
          stationError={{ ...err, body: mockBody }}
        />,
      );

      toggle = screen.getByTestId('message-bar-details-button');
      expect(toggle).toBeInTheDocument();

      fireEvent.click(toggle);

      const body = container.querySelector('.body');
      expect(body?.textContent).toBe(mockBody);
    });
  });
});
