import AuditTrailListComponent from "./audit-trail-list.component";
import { useQuery } from "@apollo/client/react";
import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
import AlertComponent from "../alert/alert.component";
import { logImEXEvent } from "../../firebase/firebase.utils";
import EmailAuditTrailListComponent from "./email-audit-trail-list.component";
import { Card, Row } from "antd";

export default function AuditTrailListContainer({ recordId }) {
  const { loading, error, data } = useQuery(QUERY_AUDIT_TRAIL, {
    variables: { id: recordId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  logImEXEvent("audittrail_view", { recordId });
  return (
    <div>
      {error ? (
        <AlertComponent type="error" title={error.message} />
      ) : (
        <Row gutter={[16, 16]}>
          <Card>
            <AuditTrailListComponent loading={loading} data={data ? data.audit_trail : []} />
          </Card>
          <Card>
            <EmailAuditTrailListComponent loading={loading} data={data ? data.audit_trail : []} />
          </Card>
        </Row>
      )}
    </div>
  );
}
