import { type FC } from "react";
import { useTranslation } from "react-i18next";
import AttachmentItem from "./AttachmentItem";
import type { TaskAttachment } from "./types";
import type { TaskAttachmentType } from "../../../task/types/TaskTypes";

type Props = {
  attachments?: TaskAttachmentType[];
};

const AttachmentList: FC<Props> = ({ attachments = [] }) => {
  const { t } = useTranslation("global");

  const mappedAttachments: TaskAttachment[] = attachments.map((item) => ({
    id: item.id,
    title: item.title,
    type: item.type,
    file: item.file,
    createdAt: item.createdAt,
  }));

  const files = mappedAttachments.filter((item) => item.type === "file");
  const links = mappedAttachments.filter((item) => item.type === "link");

  if (mappedAttachments.length === 0) return null;

  return (
    <div className="mt-6">
      <div className="text-sm font-bold">{t("taskmanager.task_detail.attachment")}</div>

      {files.length > 0 && (
        <div className="mt-4">
          <div className="text-sm">{t("taskmanager.task_detail.files")}</div>

          <div className="mt-3 flex flex-col gap-3">
            {files.map((item) => (
              <AttachmentItem
                key={item.id}
                title={item.title}
                createdAt={item.createdAt}
                type="file"
                url={item.file}
                onEdit={() => {}}
                onDelete={() => {}}
              />
            ))}
          </div>
        </div>
      )}

      {links.length > 0 && (
        <div className="mt-4">
          <div className="text-sm">{t("taskmanager.task_detail.links")}</div>

          <div className="mt-3 flex flex-col gap-3">
            {links.map((item) => (
              <AttachmentItem
                key={item.id}
                title={item.title}
                createdAt={item.createdAt}
                type="link"
                url={item.file}
                onEdit={() => {}}
                onDelete={() => {}}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default AttachmentList;
