import React from "react";
import { TemplateProps, TemplateWithComponent } from "./types";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const style = require("./defaultcert.module.css");

export const DefaultTemplate: React.FunctionComponent<TemplateProps<any>> = (props) => {
  const json = props.document;
  const issuedDate = json["issuedOn"];
  const certificateName = json["name"];
  const recipientName = json["recipient"]["name"];
  let formattedDate = "";
  const d = new Date(issuedDate);
  const timestamp = Date.parse(issuedDate);
  if (issuedDate == "<issued date>") {
    formattedDate = issuedDate;
  } else if (isNaN(timestamp) == false) {
    const dtf = new Intl.DateTimeFormat("en", { year: "numeric", month: "short", day: "2-digit" });
    const [{ value: mo }, , { value: da }, , { value: ye }] = dtf.formatToParts(d);
    formattedDate = da + " " + mo + " " + ye;
  }
  return (
    <div className={style["cert-template"]}>
      <div className={style["cert-name-wrapper"]}>
        <span className={style["cert-name"]}>{certificateName}</span>
      </div>
      <div className={style["recipient-name-wrapper"]}>
        <span className={style["recipient-name"]}>{recipientName}</span>
      </div>
      <div className={style["issued-date"]}>{formattedDate}</div>
    </div>
  );
};

export const defaultTemplate: TemplateWithComponent = {
  id: "default-template",
  label: "Certificate",
  template: DefaultTemplate,
};
