import { Button } from "antd";
import queryString from "query-string";
import React, { 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";

const AttendanceCsv = TemplateList("special").attendance_detail_csv;

export default function TimeTicketsAttendanceTable() {
  const searchParams = queryString.parse(useLocation().search);
  const { start, end } = searchParams;
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);

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

    await GenerateDocument(
      {
        name: AttendanceCsv.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")
        }
      },
      {},
      "text"
    );

    setLoading(false);
  };

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