import React, { ReactElement } from "react";
import Card from "../shared/Carda";
import { Link } from "react-router-dom";
import ellipsize from "ellipsize";
import { isEmpty, isNil, isUndefined, map } from "lodash";
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
import {
  determineCoverFile,
  determineExternalMetadata,
} from "../../shared/utils/metadata.utils";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import Header from "../shared/Header";
import useEmblaCarousel from "embla-carousel-react";

type RecentlyImportedProps = {
  comics: any;
};

export const RecentlyImported = (
  comics: RecentlyImportedProps,
): ReactElement => {
  console.log(comics);
  
  // embla carousel
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: false,
    align: "start",
    containScroll: "trimSnaps",
    slidesToScroll: 1,
  });

  return (
    <div>
      <Header
        headerContent="Recently Imported"
        subHeaderContent="Recent Library activity such as imports, tagging, etc."
        iconClassNames="fa-solid fa-binoculars mr-2"
      />
      <div className="-mr-10 sm:-mr-17 lg:-mr-29 xl:-mr-36 2xl:-mr-42 mt-3">
        <div className="overflow-hidden" ref={emblaRef}>
          <div className="flex">
            {comics?.comics.map(
          (
            {
              _id,
              rawFileDetails,
              sourcedMetadata: { comicvine, comicInfo, locg },
              inferredMetadata,
              wanted: { source } = {},
            },
            idx,
          ) => {
            const { issueName, url } = determineCoverFile({
              rawFileDetails,
              comicvine,
              comicInfo,
              locg,
            });
            const { issue, coverURL, icon } = determineExternalMetadata(
              source,
              {
                comicvine,
                comicInfo,
                locg,
              },
            );
            const isComicVineMetadataAvailable =
              !isUndefined(comicvine) &&
              !isUndefined(comicvine.volumeInformation);
            const hasComicInfo = !isNil(comicInfo) && !isEmpty(comicInfo);
            const cardState = (hasComicInfo || isComicVineMetadataAvailable) ? "scraped" : "imported";
            return (
              <div
                key={idx}
                className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
              >
                <Card
                  orientation="vertical-2"
                  imageUrl={url}
                  title={inferredMetadata.issue.name}
                  hasDetails
                  cardState={cardState}
                >
                <div>
                  <dd className="text-sm my-1 flex flex-row gap-1">
                    {/* Issue number */}
                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                      <span className="pr-1 pt-1">
                        <i className="icon-[solar--hashtag-outline]"></i>
                      </span>
                      <span className="text-md text-slate-900">
                        {inferredMetadata.issue.number}
                      </span>
                    </span>
                    {/* File extension */}
                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                      <span className="pr-1 pt-1">
                        <i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
                      </span>

                      <span className="text-md text-slate-500 dark:text-slate-900">
                        {rawFileDetails.extension}
                      </span>
                    </span>
                    {/* Uncompressed status  */}
                    {rawFileDetails?.archive?.uncompressed ? (
                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                        <span className="pr-1 pt-1">
                          <i className="icon-[solar--bookmark-bold-duotone] w-4 h-4"></i>
                        </span>
                      </span>
                    ) : null}
                  </dd>
                </div>

                <div className="flex flex-row items-center gap-1 mt-2 pb-1">
                  <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                    {/* ComicInfo.xml presence */}
                    {!isNil(comicInfo) && !isEmpty(comicInfo) && (
                      <div className="mt-1">
                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-gray-500 dark:text-white-300"></i>
                      </div>
                    )}
                    {/* ComicVine metadata presence */}
                    {isComicVineMetadataAvailable && (
                      <span className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0">
                        <img
                          src="/src/client/assets/img/cvlogo.svg"
                          alt={"ComicVine metadata detected."}
                          className="w-full h-full object-contain"
                        />
                      </span>
                    )}
                  </div>
                  {/* Raw file presence  */}
                  {isNil(rawFileDetails) && (
                    <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
                      <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
                    </span>
                  )}
                </div>
              </Card>
              </div>
            );
          },
        )}
          </div>
        </div>
      </div>
    </div>
  );
};