import React, { ReactElement } from "react";
import Card from "./Carda";
import { Link } from "react-router-dom";
import ellipsize from "ellipsize";
import {
  removeLeadingPeriod,
  escapePoundSymbol,
} from "../shared/utils/formatting.utils";
import { isNil, map } from "lodash";

type RecentlyImportedProps = {
  comicBookCovers: any;
};

export const RecentlyImported = ({
  comicBookCovers,
}: RecentlyImportedProps): ReactElement => (
  <section className="card-container">
    {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
      let imagePath = "";
      let comicName = "";
      if (!isNil(rawFileDetails)) {
        const encodedFilePath = encodeURI(
          "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
        );
        imagePath = escapePoundSymbol(encodedFilePath);
        comicName = rawFileDetails.name;
      } else if (!isNil(sourcedMetadata)) {
        imagePath = sourcedMetadata.comicvine.image.small_url;
        comicName = sourcedMetadata.comicvine.name;
      }
      const titleElement = (
        <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
      );
      return (
        <Card
          key={_id}
          orientation={"vertical"}
          imageUrl={imagePath}
          hasDetails
          title={comicName ? titleElement : null}
        ></Card>
      );
    })}
  </section>
);