/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import type { TExternalContourMirroredAttachment } from "@plane/types";
import { convertBytesToSize, getFileExtension, getFileName, renderFormattedDate } from "@plane/utils";
import { getFileIcon } from "@/components/icons";

type Props = {
  attachments: TExternalContourMirroredAttachment[];
};

export const ExternalContoursMirroredAttachments = observer(function ExternalContoursMirroredAttachments(props: Props) {
  const { attachments } = props;
  const { t } = useTranslation();

  return (
    <div className="nodedc-external-section space-y-3 px-4 py-4">
      <div className="text-body-sm-medium">{t("external_contours_page.mirror.attachments_title")}</div>

      {attachments.length > 0 ? (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
          {attachments.map((attachment) => {
            const fileName = getFileName(attachment.attributes?.name ?? "");
            const fileExtension = getFileExtension(attachment.attributes?.name ?? attachment.asset_url ?? "");
            const fileIcon = getFileIcon(fileExtension, 28);
            const fileSize = attachment.attributes?.size ? convertBytesToSize(attachment.attributes.size) : null;

            return (
              <a
                key={attachment.id}
                href={attachment.download_url || "#"}
                target="_blank"
                rel="noreferrer"
                className="nodedc-external-panel flex min-h-[72px] items-center justify-between gap-3 px-4 py-3 text-13 transition-colors hover:bg-white/6"
              >
                <div className="flex items-center gap-3 overflow-hidden">
                  <div className="h-7 w-7 flex-shrink-0">{fileIcon}</div>
                  <div className="min-w-0">
                    <div className="truncate text-13 text-primary">{fileName || t("attachments")}</div>
                    <div className="flex flex-wrap items-center gap-2 text-11 text-secondary">
                      {fileExtension ? <span>{fileExtension.toUpperCase()}</span> : null}
                      {fileSize ? <span>{fileSize}</span> : null}
                      <span>{renderFormattedDate(attachment.updated_at)}</span>
                    </div>
                  </div>
                </div>
                <div className="text-right text-11 text-secondary">{attachment.uploaded_by || t("external_contours_page.mirror.system_actor")}</div>
              </a>
            );
          })}
        </div>
      ) : (
        <div className="nodedc-external-empty px-4 py-6 text-13 text-secondary">
          {t("external_contours_page.mirror.attachments_empty")}
        </div>
      )}
    </div>
  );
});
