import { useQuery } from "@apollo/client";
import { Button, Card, Col, Row, Table, Tag } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import React from "react";
import { useTranslation } from "react-i18next";
import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectCurrentUser } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobAuditTrail);

export function JobAuditTrail({ currentUser, jobId }) {
  const { t } = useTranslation();
  const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
    variables: { jobid: jobId },
    skip: !jobId,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  const columns = [
    {
      title: t("audit.fields.created"),
      dataIndex: "created",
      key: "created",
      render: (text, record) => <DateTimeFormatter>{record.created}</DateTimeFormatter>
    },
    {
      title: t("audit.fields.useremail"),
      dataIndex: "useremail",
      key: "useremail"
    },
    {
      title: t("audit.fields.operation"),
      dataIndex: "operation",
      key: "operation"
    }
  ];
  const emailColumns = [
    {
      title: t("audit.fields.created"),
      dataIndex: " created_at",
      key: " created_at",

      render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
    },

    {
      title: t("audit.fields.useremail"),
      dataIndex: "useremail",
      key: "useremail"
    },

    {
      title: t("audit.fields.to"),
      dataIndex: "to",
      key: "to",

      render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
    },
    {
      title: t("audit.fields.cc"),
      dataIndex: "cc",
      key: "cc",

      render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
    },
    {
      title: t("audit.fields.subject"),
      dataIndex: "subject",
      key: "subject"
    },
    {
      title: t("audit.fields.status"),
      dataIndex: "status",
      key: "status"
    },
    ...(currentUser?.email.includes("@imex.")
      ? [
          {
            title: t("audit.fields.contents"),
            dataIndex: "contents",
            key: "contents",
            width: "10%",
            render: (text, record) => (
              <Button
                onClick={() => {
                  var win = window.open(
                    "",
                    "Title",
                    "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
                  );
                  win.document.body.innerHTML = record.contents;
                }}
              >
                Preview
              </Button>
            )
          }
        ]
      : [])
  ];
  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <Card
          title={t("jobs.labels.audit")}
          extra={
            <Button
              onClick={() => {
                refetch();
              }}
            >
              <SyncOutlined />
            </Button>
          }
        >
          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
        </Card>
      </Col>
      <Col span={24}>
        <Card title={t("jobs.labels.emailaudit")}>
          <Table loading={loading} columns={emailColumns} rowKey="id" dataSource={data ? data.email_audit_trail : []} />
        </Card>
      </Col>
    </Row>
  );
}
