import { CellContext } from "@tanstack/react-table";
import { Item, ItemUploadState } from "@/features/drivers/types";
import { memo } from "react";
import { ItemIcon } from "@/features/explorer/components/icons/ItemIcon";
import { timeAgo } from "@/features/explorer/utils/utils";
import { removeFileExtension } from "../../utils/mimeTypes";
import { LoadingRing } from "@/features/ui/components/loading-ring/LoadingRing";
import { useTranslation } from "react-i18next";
import clsx from "clsx";

type EmbeddedExplorerGridMobileCellProps = CellContext<Item, unknown>;

const EmbeddedExplorerGridMobileCellComponent = (
  params: EmbeddedExplorerGridMobileCellProps,
) => {
  const item = params.row.original;
  const { t } = useTranslation();
  const isDuplicating = item.upload_state === ItemUploadState.DUPLICATING;

  return (
    <div className="explorer__grid__item__mobile">
      {isDuplicating ? (
        <div className="explorer__grid__item__name__spinner-container">
          <LoadingRing size="md" />
        </div>
      ) : (
        <ItemIcon key={item.id} item={item} />
      )}
      <div className="explorer__grid__item__mobile__info">
        <div className="explorer__grid__item__mobile__info__title">
          <span
            className={clsx("explorer__grid__item__name__text", {
              "explorer__grid__item__name--duplicating-text": isDuplicating,
            })}
          >
            {removeFileExtension(item.title)}
            {isDuplicating && (
              <span className="explorer__grid__item__name__duplicating-label">
                {" "}
                ({t("explorer.item.duplicating")})
              </span>
            )}
          </span>
        </div>
        <div className="explorer__grid__item__mobile__info__meta">
          <span>{timeAgo(new Date(item.updated_at))}</span>
        </div>
      </div>
    </div>
  );
};

export const EmbeddedExplorerGridMobileCell = memo(
  EmbeddedExplorerGridMobileCellComponent,
);
