import { useQuery } from "@apollo/client";
import { Statistic } from "antd";
import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import { QUERY_JOB_PAYMENT_TOTALS } from "../../graphql/payments.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";

export default function PaymentFormTotalPayments({ jobid }) {
  const { t } = useTranslation();

  const { loading, error, data } = useQuery(QUERY_JOB_PAYMENT_TOTALS, {
    variables: { id: jobid },
    skip: !jobid,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  if (!data) return <></>;
  const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {
    return acc.add(
      Dinero({ amount: Math.round(((val && val.amount) || 0) * 100) })
    );
  }, Dinero());

  const balance =
    data.jobs_by_pk.job_totals &&
    Dinero(data.jobs_by_pk.job_totals.totals.total_repairs).subtract(
      totalPayments
    );

  return (
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <Statistic
        title={t("payments.labels.totalpayments")}
        value={totalPayments.toFormat()}
      />
      {balance && (
        <Statistic
          title={t("payments.labels.balance")}
          valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
          value={(balance && balance.toFormat()) || ""}
        />
      )}
      {!balance && <div>{t("jobs.errors.nofinancial")}</div>}
    </div>
  );
}