import React, { ReactElement } from "react";
import MatchResult from "./MatchResult";
import { isEmpty } from "lodash";
import { useStore } from "../../store";
import { useShallow } from "zustand/react/shallow";

interface ComicVineMatchPanelProps {
  props: {
    comicObjectId: string;
    comicVineMatches: any[];
    queryClient?: any;
    onMatchApplied?: () => void;
  };
}

/** Displays ComicVine search results or a status message while searching. */
export const ComicVineMatchPanel = ({ props: comicVineData }: ComicVineMatchPanelProps): ReactElement => {
  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData;
  const { comicvine } = useStore(
    useShallow((state) => ({
      comicvine: state.comicvine,
    })),
  );
  return (
    <>
      <div>
        {!isEmpty(comicVineMatches) ? (
          <MatchResult
            matchData={comicVineMatches}
            comicObjectId={comicObjectId}
            queryClient={queryClient}
            onMatchApplied={onMatchApplied}
          />
        ) : (
          <>
            <article
              role="alert"
              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600 text-sm"
            >
              <div>
                <p>ComicVine match results are an approximation.</p>
                <p>
                  Auto-matching is not available yet. If you see no results or
                  poor quality ones, you can override the search query
                  parameters to get better ones.
                </p>
              </div>
            </article>
            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
          </>
        )}
      </div>
    </>
  );
};

export default ComicVineMatchPanel;