import CallMadeIcon from "@mui/icons-material/CallMade";
import CallReceivedIcon from "@mui/icons-material/CallReceived";
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
import React from "react";
import { match } from "ts-pattern";
import { InboxEntry } from "../api/InboxApi";
import { fmtDateFromTime } from "../utils/DateUtils";
import { AmountWidget } from "./AmountWidget";
import { UploadedFileWidget } from "./UploadedFileWidget";

export function InboxEntryWidget(p: { entry: InboxEntry }): React.ReactElement {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        height: "100%",
      }}
    >
      {/* File */}
      <UploadedFileWidget small file_id={p.entry.file_id} />

      {/* Icon */}
      {match(p.entry.amount)
        .when(
          (v) => v === undefined,
          () => <QuestionMarkIcon color="secondary" />
        )
        .when(
          (v) => v > 0,
          () => <CallReceivedIcon color="success" />
        )
        .otherwise(() => (
          <CallMadeIcon color="error" />
        ))}

      <span
        style={{
          marginLeft: "5px",
          display: "inline-flex",
          flexDirection: "column",
          justifyContent: "center",
          height: "100%",
        }}
      >
        <span style={{ height: "1em", lineHeight: 1 }}>
          {(p.entry.label?.length ?? 0) > 0 ? p.entry.label : <i>No label</i>}
        </span>
        <span style={{ display: "flex", alignItems: "center", lineHeight: 1 }}>
          {p.entry.amount ? (
            <AmountWidget amount={p.entry.amount} />
          ) : (
            <i>No amount</i>
          )}
          <span style={{ width: "0.5em" }} />
          &bull;
          <span style={{ width: "0.5em" }} />
          {fmtDateFromTime(p.entry.time)}
        </span>
      </span>
    </span>
  );
}