import React from 'react';
import { render } from '@testing-library/react';
import { PreviewPanelProps } from './PreviewPanel';
import { PreviewPanelHOC, PreviewPanelHOCProps } from './PreviewPanelHOC';
import { OverlayTriggerState } from 'react-stately';
import { DOMAttributes, FocusableElement } from '@react-types/shared';

const modalStateMock: OverlayTriggerState = {
  isOpen: false,
  setOpen: jest.fn(() => null),
  open: jest.fn(() => null),
  close: jest.fn(() => null),
  toggle: jest.fn(() => null),
};

const previewModalOverlayPropsMock: DOMAttributes<FocusableElement> = {
  onFocus: jest.fn(() => null),
  onBlur: jest.fn(() => null),
  onClick: jest.fn(() => null),
};

describe('PreviewPanelHOC', () => {
  const ResourceComponentMock: React.FC = () => <div>Resource Component Mock</div>;

  const defaultProps: PreviewPanelHOCProps & PreviewPanelProps = {
    ResourceComponent: ResourceComponentMock,
    resource: null,
    modalState: modalStateMock,
    previewModalOverlayProps: previewModalOverlayPropsMock,
    allowedTypes: undefined,
    onSelect: () => {
      return;
    },
    onClose: () => {
      return;
    },
  };

  it('renders OriginalComponent with ResourceComponent', () => {
    const WrappedComponent = PreviewPanelHOC(ResourceComponentMock);
    const { getByText } = render(<WrappedComponent {...defaultProps} />);

    expect(getByText('Make a selection to see more info here.')).toBeInTheDocument();
  });
});