import React, { useEffect } from 'react';
import { useMediaQuery } from 'react-responsive';
import { OverlayTriggerState } from 'react-stately';
import { DOMAttributes, FocusableElement } from '@react-types/shared';

import { Icon, IconOptions } from '../Icons/Icon';
import PreviewModal from './PreviewModal';

export interface PreviewPanelProps {
  resource: any | null;
  modalState: OverlayTriggerState;
  previewModalOverlayProps: DOMAttributes<FocusableElement>;
  allowedTypes: string[] | undefined;
  onSelect: (resource: any) => void;
  onClose: () => void;
  ResourceComponent?: React.ElementType;
  selectionCallback?: (param: any) => void;
  resourceComponentProps?: {
    [x: string]: any;
  };
}

export const PreviewPanel = function ({
  resource,
  previewModalOverlayProps,
  modalState,
  onSelect,
  onClose,
  ResourceComponent,
  selectionCallback,
  resourceComponentProps = {},
}: PreviewPanelProps) {
  // Watch the media size to see if we are on mobile size
  const isMobile = useMediaQuery({ query: '(max-width: 640px)' });

  // If we are on mobile and the selected resource changes show the preview panel modal.
  useEffect(() => {
    if (!modalState.isOpen) {
      modalState.setOpen(Boolean(resource && isMobile));
    }
  }, [resource, isMobile]);

  const previewPanel = resource && (
    <>
      <div className="flex flex-col grow">
        {ResourceComponent && (
          <ResourceComponent {...resourceComponentProps} resource={resource} selectionCallback={selectionCallback} />
        )}
      </div>
      <div className="flex justify-end border-t border-gray-300">
        <button
          type="button"
          onClick={() => onSelect(resource)}
          data-testid={`preview-panel-select-button`}
          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold"
        >
          Select
        </button>
      </div>
    </>
  );

  return (
    <div className="squiz-gb-scope h-full">
      {/* Dialog has its own title */}
      {!isMobile && <h3 className="sr-only">Resource Details</h3>}

      {/* Nothing selected, show an info message */}
      {resource === null && (
        <div className="max-sm:hidden flex flex-col h-full">
          <div className="flex flex-col grow items-center mt-20 mx-20">
            <Icon icon={'resource-select' as IconOptions} aria-hidden />
            <div className="text-sm text-gray-600 text-center mt-4">Make a selection to see more info here.</div>
          </div>
          <div className="flex justify-end border-t border-gray-300">
            <button disabled type="button" className="rounded text-sm text-white bg-blue-300/[.6] py-2 px-2.5 m-5">
              Select
            </button>
          </div>
        </div>
      )}

      {/* Resource details shows in a new modal / bottom popover on mobile size */}
      {resource && isMobile && modalState.isOpen && (
        <PreviewModal state={modalState} overlayProps={previewModalOverlayProps} onClose={onClose}>
          {previewPanel}
        </PreviewModal>
      )}

      {/* If not mobile, just print the details out */}
      {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
    </div>
  );
};