import { map, unionBy } from "lodash";
import React, { ReactElement } from "react";
import ellipsize from "ellipsize";
import { Link, useNavigate } from "react-router-dom";
import Card from "../shared/Carda";
import Header from "../shared/Header";
import useEmblaCarousel from "embla-carousel-react";
import { GetVolumeGroupsQuery } from "../../graphql/generated";

type VolumeGroupsProps = {
  volumeGroups?: GetVolumeGroupsQuery['getComicBookGroups'];
};

export const VolumeGroups = (props: VolumeGroupsProps): ReactElement | null => {
  // Till mongo gives us back the deduplicated results with the ObjectId
  const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
  if (!deduplicatedGroups || deduplicatedGroups.length === 0) return null;

  const navigate = useNavigate();
  const navigateToVolumes = (row: any) => {
    navigate(`/volumes/all`);
  };

  // embla carousel
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: false,
    align: "start",
    containScroll: "trimSnaps",
    slidesToScroll: 1,
  });

  return (
    <div>
      <Header
        headerContent="Volumes"
        subHeaderContent={<>Based on ComicVine Volume information</>}
        iconClassNames="fa-solid fa-binoculars mr-2"
        link={"/volumes"}
      />
      <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">
            {map(deduplicatedGroups, (data) => {
              return (
                <div
                  key={data.id}
                  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={data.volumes?.image?.small_url || undefined}
                    hasDetails
                  >
                    <div className="py-3">
                      <div className="text-sm">
                        <Link to={`/volume/details/${data.id}`}>
                          {ellipsize(data.volumes?.name || 'Unknown', 48)}
                        </Link>
                      </div>
                      {/* issue count */}
                      <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
                        <span className="pr-1 pt-1">
                          <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
                        </span>

                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {data.volumes?.count_of_issues || 0} issues
                        </span>
                      </span>
                    </div>
                  </Card>
                  <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
                  <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
                  <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default VolumeGroups;