/**
 * 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 { TExternalContourMirroredComment } from "@plane/types";
import { Avatar } from "@plane/ui";
import { renderFormattedDate } from "@plane/utils";

type Props = {
  comments: TExternalContourMirroredComment[];
};

export const ExternalContoursMirroredComments = observer(function ExternalContoursMirroredComments(props: Props) {
  const { comments } = 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.comments_title")}</div>

      {comments.length > 0 ? (
        <div className="space-y-3">
          {comments.map((comment) => {
            const actorName = comment.actor_detail?.display_name || t("external_contours_page.mirror.system_actor");
            return (
              <div key={comment.id} className="nodedc-external-panel p-4">
                <div className="mb-3 flex items-center justify-between gap-3">
                  <div className="flex items-center gap-2">
                    <Avatar src={comment.actor_detail?.avatar_url || ""} name={actorName} size="md" />
                    <div className="min-w-0">
                      <div className="truncate text-13 text-primary">{actorName}</div>
                      <div className="text-11 text-secondary">{renderFormattedDate(comment.created_at)}</div>
                    </div>
                  </div>
                  {comment.edited_at ? (
                    <div className="text-11 text-tertiary">{t("external_contours_page.mirror.comment_edited")}</div>
                  ) : null}
                </div>
                <div
                  className="prose prose-invert max-w-none text-13 text-secondary [&_p]:mb-3"
                  dangerouslySetInnerHTML={{ __html: comment.comment_html || "<p></p>" }}
                />
              </div>
            );
          })}
        </div>
      ) : (
        <div className="nodedc-external-empty px-4 py-6 text-13 text-secondary">
          {t("external_contours_page.mirror.comments_empty")}
        </div>
      )}
    </div>
  );
});
