import React, { ReactElement } from "react";
import Card from "../Carda";
import { Link, useNavigate } from "react-router-dom";
import ellipsize from "ellipsize";
import { isEmpty, isNil, isUndefined, map } from "lodash";
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
import Masonry from "react-masonry-css";

type WantedComicsListProps = {
  comics: any;
};

export const WantedComicsList = ({
  comics,
}: WantedComicsListProps): ReactElement => {
  const breakpointColumnsObj = {
    default: 5,
    1100: 4,
    700: 2,
    600: 2,
  };

  const navigate = useNavigate();
  const navigateToWantedComics = (row) => {
    navigate(`/wanted/all`);
  };
  return (
    <>
      <div className="content">
        <a className="mb-1" onClick={navigateToWantedComics}>
          <span className="is-size-4 has-text-weight-semibold">
            Wanted Comics
          </span>
          <span className="icon mt-1">
            <i className="fa-solid fa-angle-right"></i>
          </span>
        </a>
        <p className="subtitle is-7">
          Comics marked as wanted from various sources.
        </p>
      </div>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="recent-comics-container"
        columnClassName="recent-comics-column"
      >
        {map(comics, ({ _id, rawFileDetails, sourcedMetadata }) => {
          const isComicBookMetadataAvailable =
            sourcedMetadata &&
            !isUndefined(sourcedMetadata.comicvine) &&
            !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
            !isEmpty(sourcedMetadata);
          let imagePath = "";
          let comicName = "";
          if (isComicBookMetadataAvailable) {
            imagePath = sourcedMetadata.comicvine.image.small_url;
            comicName = sourcedMetadata.comicvine.name;
          }
          const titleElement = (
            <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 20)}</Link>
          );
          return (
            <Card
              key={_id}
              orientation={"vertical"}
              imageUrl={imagePath}
              hasDetails
              title={comicName ? titleElement : <span>No Name</span>}
            >
              <div className="content is-flex is-flex-direction-row">
                {isComicBookMetadataAvailable && (
                  <span className="icon custom-icon is-small">
                    <img src="/img/cvlogo.svg" />
                  </span>
                )}
                {/* Raw file presence  */}
                {isEmpty(rawFileDetails.cover) && (
                  <span className="icon custom-icon is-small has-text-danger mr-2">
                    <img src="/img/missing-file.svg" />
                  </span>
                )}
                {/* Issue type */}
                {isComicBookMetadataAvailable &&
                !isNil(
                  detectIssueTypes(
                    sourcedMetadata.comicvine.volumeInformation.description,
                  ),
                ) ? (
                  <span className="tag is-warning">
                    {
                      detectIssueTypes(
                        sourcedMetadata.comicvine.volumeInformation.description,
                      ).displayName
                    }
                  </span>
                ) : null}
              </div>
            </Card>
          );
        })}
      </Masonry>
    </>
  );
};