import { Button } from "antd";
import queryString from "query-string";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import { useTranslation } from "react-i18next";
import dayjs from "../../utils/day";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const PayrollTemplate = TemplateList("special").exported_payroll;
export default function TimeTicketsPayrollTable() {
  const searchParams = queryString.parse(useLocation().search);
  const { start, end } = searchParams;
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const notification = useNotification();

  const handleClick = async () => {
    setLoading(true);

    await GenerateDocument(
      {
        name: PayrollTemplate.key,
        variables: {
          start: start ? start : dayjs().startOf("week").subtract(7, "day").format("YYYY-MM-DD"),
          end: end ? end : dayjs().endOf("week").format("YYYY-MM-DD")
        }
      },
      {},
      "x",
      null,
      notification
    );

    setLoading(false);
  };

  return (
    <Button loading={loading} onClick={handleClick}>
      {t("printcenter.payments.exported_payroll")}
    </Button>
  );
}
