import { Button, DatePicker, Form, Space } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { queryReportingData } from "../../../redux/reporting/reporting.actions";
import dayjs from "../../../util/day.js";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  queryReportingData: (dates) => dispatch(queryReportingData(dates))
});
export default connect(mapStateToProps, mapDispatchToProps)(ReportingDatesMolecule);

export function ReportingDatesMolecule({ queryReportingData }) {
  const [form] = Form.useForm();

  const handleFinish = (values) => {
    queryReportingData({
      startDate: values.dateRange[0],
      endDate: values.dateRange[1]
    });
  };

  return (
    <Form form={form} onFinish={handleFinish}>
      <Space wrap align="middle">
        <Form.Item
          label="Ready for Payment Date Between"
          name="dateRange"
          rules={[
            { type: "array", required: true },
            {
              validator(rule, value) {
                if (!value || !value.length === 2) {
                  return Promise.resolve();
                }

                if (dayjs(value[1]).diff(dayjs(value[0]), "years", true) > 1) {
                  return Promise.reject("Time period exceeds 1 year. Please select a shorter date range.");
                } else {
                  return Promise.resolve();
                }
              }
            }
          ]}
        >
          <DatePicker.RangePicker
            format="MM/DD/YYYY"
            ranges={{
              "Last Month": [
                dayjs().startOf("month").subtract(1, "month"),
                dayjs().startOf("month").subtract(1, "month").endOf("month")
              ],

              "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
              "Next Month": [
                dayjs().startOf("month").add(1, "month"),
                dayjs().startOf("month").add(1, "month").endOf("month")
              ],
              "Last Quarter": [
                dayjs().startOf("quarter").subtract(1, "quarter"),
                dayjs().startOf("quarter").subtract(1, "day")
              ],
              "This Quarter": [
                dayjs().startOf("quarter"),
                dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")
              ],
              "Last 3 Months (Exlcusive)": [
                dayjs().startOf("month").subtract(3, "month"),
                dayjs().startOf("month").subtract(1, "month").endOf("month")
              ],
              "Last 3 Months (Inclusive)": [dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month")]
            }}
          />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Run Search
        </Button>
      </Space>
    </Form>
  );
}
