import React from "react";
import ReactDOMServer from "react-dom/server";
import { getNationalNumber, formatSeconds } from "./util";
import { DateTime } from "luxon";
import type { Contact } from "./types";
import type { StoredVoicemail } from "knex/types/tables";

export function getTicketSubject(
  voicemail: StoredVoicemail,
  contact?: Contact
) {
  return `New Voicemail from ${getNationalNumber(voicemail.fromNumber)} (${
    contact ? contact.name : voicemail.fromName
  })`;
}

export function getTicketBody(vm: StoredVoicemail, contact?: Contact) {
  return ReactDOMServer.renderToStaticMarkup(
    <div>
      <div>
        <b>Received:</b>{" "}
        {DateTime.fromISO(vm.received).toLocaleString(DateTime.DATETIME_MED)}
      </div>
      <div>
        <b>From:</b> {getNationalNumber(vm.fromNumber)} (
        {contact?.name ?? vm.fromName})
      </div>
      <div>
        <b>To:</b> {getNationalNumber(vm.toNumber)}x{vm.extensionNumber} (
        {vm.extensionName})
      </div>
      <div>
        <b>Duration: </b> {formatSeconds(vm.duration)}
      </div>
      <br />
      <div>
        <strong>Transcription: </strong>
        <p>
          <i>
            {vm.transcription
              ? `"${vm.transcription}"`
              : vm.transcriptionStatus}
          </i>
        </p>
      </div>
    </div>
  );
}