import { Divider, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import JobTotalsTable from "../job-totals-table/job-totals-table.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");

export function JobsDetailTotals({ job, bodyshop }) {
  const { t } = useTranslation();

  return (
    <div>
      <Typography.Title level={4}>
        {t("payments.labels.title")}
      </Typography.Title>
      <table style={{ width: "100%" }}>
        <thead>
          <tr>
            <th>{t("payments.fields.created_at")}</th>
            <th>{t("payments.fields.payer")}</th>
            <th>{t("payments.fields.amount")}</th>
            <th>{t("payments.fields.memo")}</th>
            <th>{t("payments.fields.type")}</th>
            <th>{t("payments.fields.transactionid")}</th>
            <th>{t("payments.fields.stripeid")}</th>
          </tr>
        </thead>
        <tbody>
          {job.payments.map((p, idx) => (
            <tr key={idx}>
              <td>
                <DateTimeFormatter>{p.created_at}</DateTimeFormatter>
              </td>
              <td>{p.payer}</td>
              <td>
                <CurrencyFormatter>{p.amount}</CurrencyFormatter>
              </td>
              <td>{p.memo}</td>
              <td>{p.type}</td>
              <td>{p.transactionid}</td>
              <td>
                {p.stripeid ? (
                  <a
                    href={
                      stripeTestEnv
                        ? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${p.stripeid}`
                        : `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${p.stripeid}`
                    }
                  >
                    {p.stripeid}
                  </a>
                ) : null}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <Divider />

      <JobTotalsTable job={job} />
    </div>
  );
}
export default connect(mapStateToProps, null)(JobsDetailTotals);