import { PAPER, MUTE, RED, FONT_MONO, FONT_SERIF } from "../../theme";
import { marked } from "../../lib/highlight";
import Postmark from "../../components/Postmark";
import PhotoFrame from "../../components/PhotoFrame";

/*
 * Eén brief in een correspondentie; `other` is de gesprekspartner; `fresh` = nieuw sinds je de
 * correspondentie opende. `onReport` (optioneel) zet een meldknop onder brieven van de ander: melden
 * gaat over één brief, want "deze brief deugt niet" is iets anders dan "deze persoon deugt niet" —
 * en dat is precies het onderscheid dat de beheerder nodig heeft om te kunnen beoordelen.
 *
 * Komt de brief uit een zoekopdracht binnen de correspondentie, dan heeft hij `marked`: dezelfde
 * tekst met de gevonden woorden onderstreept. Verder verandert er niets — een treffer is gewoon
 * een brief.
 */
export default function LetterCard({ letter, meId, other, fresh = false, onReport }) {
  const mine = letter.from === meId;
  return (
    <article
      style={{
        background: mine ? PAPER : "#fff",
        border: `1px solid ${fresh ? RED : MUTE}`,
        boxShadow: fresh ? "2px 3px 0 rgba(198,59,46,0.25)" : "2px 3px 0 rgba(31,44,85,0.12)",
        padding: "16px 18px", marginBottom: 18,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginBottom: 8 }}>
        <strong style={{ fontSize: 15 }}>{mine ? `Aan ${other.name}` : `Van ${other.name}`}</strong>
        <Postmark date={letter.date} />
      </div>
      {letter.photo && (
        <PhotoFrame photo={letter.photo} width="70%" marginBottom={12} />
      )}
      <p style={{ fontFamily: FONT_SERIF, fontSize: 15.5, lineHeight: 1.7, margin: 0, whiteSpace: "pre-wrap" }}>
        {marked(letter.marked ?? letter.text)}
      </p>
      {/* Alleen bij post van de ander, en klein: het hoort bereikbaar te zijn, niet in de weg te staan */}
      {!mine && onReport && (
        <div style={{ textAlign: "right", marginTop: 10 }}>
          <button
            onClick={onReport}
            aria-label={`Deze brief van ${other.name} melden`}
            title="Deze brief melden bij de beheerder"
            style={{ background: "none", border: "none", color: MUTE, fontFamily: FONT_MONO, fontSize: 11, padding: 0 }}
          >
            ⚑ meld deze brief
          </button>
        </div>
      )}
    </article>
  );
}