import { Button, DatePicker, Form } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { queryReportingData } from "../../../redux/reporting/reporting.actions";
import moment from "moment";
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}>
      <div style={{ display: "flex" }}>
        <Form.Item
          label="Close Date Between"
          name="dateRange"
          rules={[{ type: "array", required: true }]}
        >
          <DatePicker.RangePicker
            ranges={{
              Today: [moment(), moment()],
              "Last 7 days": [moment().subtract(7, "days"), moment()],
              "Next 7 days": [moment(), moment().add(7, "days")],
              "Next 14 days": [moment(), moment().add(14, "days")],
              "Last Month": [
                moment().startOf("month").subtract(1, "month"),
                moment().startOf("month").subtract(1, "month").endOf("month"),
              ],
              "This Month": [
                moment().startOf("month"),
                moment().endOf("month"),
              ],
              "Next Month": [
                moment().startOf("month").add(1, "month"),
                moment().startOf("month").add(1, "month").endOf("month"),
              ],
            }}
          />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Run Search
        </Button>
      </div>
    </Form>
  );
}