import React from "react";
import Translate from "@docusaurus/Translate";
import { ThemeClassNames } from "@docusaurus/theme-common";
import { useDateTimeFormat } from "@docusaurus/theme-common/internal";
import type { Props } from "@theme/LastUpdated";

function LastUpdatedAtDate({
  lastUpdatedAt,
}: {
  lastUpdatedAt: number;
}): JSX.Element {
  const atDate = new Date(lastUpdatedAt);

  const timeFormat = useDateTimeFormat({
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  });

  const dateFormat = useDateTimeFormat({
    day: "numeric",
    month: "short",
    year: "numeric",
  });

  const formattedTime = timeFormat.format(atDate);
  const formattedDate = dateFormat.format(atDate);

  return (
    <Translate
      id="theme.lastUpdated.atDate"
      description="The words used to describe on which date a page has been last updated"
      values={{
        time: (
          <b>
            <time dateTime={atDate.toISOString()} itemProp="dateModified">
              {formattedTime}
            </time>
          </b>
        ),
        date: (
          <b>
            <time dateTime={atDate.toISOString()} itemProp="dateModified">
              {formattedDate}
            </time>
          </b>
        ),
      }}
    >
      {" at {time} on {date}"}
    </Translate>
  );
}

function LastUpdatedByUser({
  lastUpdatedBy,
}: {
  lastUpdatedBy: string;
}): JSX.Element {
  return (
    <Translate
      id="theme.lastUpdated.byUser"
      description="The words used to describe by who the page has been last updated"
      values={{
        user: <b>{lastUpdatedBy}</b>,
      }}
    >
      {" by {user}"}
    </Translate>
  );
}

export default function LastUpdated({
  lastUpdatedAt,
  lastUpdatedBy,
}: Props): JSX.Element {
  return (
    <span className={ThemeClassNames.common.lastUpdated}>
      <Translate
        id="theme.lastUpdated.lastUpdatedAtBy"
        description="The sentence used to display when a page has been last updated, and by who"
        values={{
          atDate: lastUpdatedAt ? (
            <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
          ) : (
            ""
          ),
          byUser: lastUpdatedBy ? (
            <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
          ) : (
            ""
          ),
        }}
      >
        {"Last updated{atDate}{byUser}"}
      </Translate>
      {process.env.NODE_ENV === "development" && (
        <div>
          {/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
          <small> (Simulated during dev for better perf)</small>
        </div>
      )}
    </span>
  );
}
