import { useTranslation } from "@refinedev/core";
import { useContext } from "react";
import { FirmContext } from "../contexts/FirmContext";
import Grid2 from '@mui/material/Grid2';

type CartoucheProps = {
  record: any
}

const Cartouche = (props: CartoucheProps) => {
  const { record } = props;
  const { translate: t } = useTranslation();
  return (
    <>
      <Grid2 container spacing={0}>
        <Grid2 size={2}>{t("schemas.created_by")}:</Grid2>
        <Grid2 size={4}><AuthorField partnerId={record.created_by} /></Grid2>
        <Grid2 size={2}>{t("schemas.created_at")}:</Grid2>
        <Grid2 size={4}>{new Date(record.created_at).toLocaleString()}</Grid2>
        <Grid2 size={2}>{t("schemas.updated_by")}:</Grid2>
        <Grid2 size={4}><AuthorField partnerId={record.updated_by} /></Grid2>
        <Grid2 size={2}>{t("schemas.updated_at")}:</Grid2>
        <Grid2 size={4}>{new Date(record.updated_at).toLocaleString()}</Grid2>
      </Grid2>
    </>
  )
}

export default Cartouche;

const AuthorField = (props: {partnerId: string})=> {
  const { partnerId } = props;
  const { partnerMap } = useContext(FirmContext);
  const { translate: t } = useTranslation();

  if (partnerMap && partnerMap.has(partnerId)) {
    return <>{ partnerMap.get(partnerId) }</>
  }
  return <>{t("REDACTED")}</>
}