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"];
  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-content"]}>
        <p className={style["default-cert-text"]}>
          The design of this certificate is used for illustration purposes only. Please verify your certificate at the
          issuer’s site.
        </p>
        <h1 className={style["cert-name"]}>{json["name"]}</h1>
        <p className={style["cert-info"]}>
          This certificate is given to
          <span className={style["receipient-name"]}>{json["recipient"]["name"]}</span>
          for successfully completing all requirements required by the
          <br />
          {json["name"]}
        </p>

        <div className={style["default-date"]}>
          <span className={style["default-issued-date"]}>{formattedDate}</span>
          <hr className={style["default-sig-line"]} />
          <span className={style["default-date-text"]}>Date Attained</span>
        </div>

        <span className={style["cert-id"]}>{json["id"]}</span>
      </div>
    </div>
  );
};

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