import { CalendarFilled } from "@ant-design/icons";
import { FloatButton } from "antd";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { queryReportingData } from "../../../redux/reporting/reporting.actions";
import dayjs from "../../../util/day.js";
import ipcTypes from "../../../ipc.types";
import { duration } from "moment/moment.js";
const { ipcRenderer } = window;
const mapDispatchToProps = (dispatch) => ({
  queryReportingData: (dates) => dispatch(queryReportingData(dates))
});
export default connect(null, mapDispatchToProps)(QuickReportFloatButton);

function QuickReportFloatButton({ queryReportingData }) {
  const navigate = useNavigate();

  const handleQuickReport = (startDate, endDate) => {
    ipcRenderer.send(ipcTypes.app.toMain.track, {
      event: "QUICK_REPORT",
      duration: duration(endDate.diff(startDate)).asDays()
    });
    queryReportingData({
      startDate,
      endDate
    });
    navigate("/reporting");
  };

  return (
    <FloatButton.Group
      shape="square"
      trigger="hover"
      icon={<CalendarFilled />}
      style={{
        marginBottom: "48px"
      }}
    >
      <FloatButton
        description="Mo."
        size="large"
        onClick={() => handleQuickReport(dayjs().startOf("month"), dayjs().endOf("month"))}
      />
      <FloatButton
        description="3Mo."
        onClick={() => handleQuickReport(dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month"))}
      />
    </FloatButton.Group>
  );
}
