import { Carousel } from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import { fetchImgproxyThumbnails } from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component";
import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsDocumentsComponent({ loading, data, bodyshop }) {
  const { t } = useTranslation();
  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
  const [thumbnails, setThumbnails] = useState([]);

  useEffect(() => {
    if (data?.id) {
      fetchImgproxyThumbnails({ setStateCallback: setThumbnails, jobId: data.id, imagesOnly: true });
    }
  }, [data?.id]);

  if (!data)
    return (
      <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
        null
      </CardTemplate>
    );

  return (
    <CardTemplate
      loading={loading}
      title={t("jobs.labels.cards.documents")}
      extraLink={`/manage/jobs/${data.id}?tab=documents`}
    >
      {!hasMediaAccess && <UpsellComponent disableMask upsell={upsellEnum().media.general} />}
      {hasMediaAccess && (
        <>
          {thumbnails.length > 0 ? (
            <Carousel autoplay>
              {thumbnails.map((item) => (
                <img key={item.id} src={item.src} alt={item.filename} />
              ))}
            </Carousel>
          ) : (
            <div>{t("documents.errors.nodocuments")}</div>
          )}
        </>
      )}
    </CardTemplate>
  );
}
