import { Button, DatePicker, Divider, Form, Space, Typography } 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";
import ipcTypes from "../../../ipc.types.js";
const { ipcRenderer } = window;
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  queryReportingData: (dates) => dispatch(queryReportingData(dates))
});
export default connect(mapStateToProps, mapDispatchToProps)(ReportingDatesMolecule);

const getReportingDatePresets = () => [
  {
    label: "Last Month",
    value: [
      dayjs().startOf("month").subtract(1, "month"),
      dayjs().startOf("month").subtract(1, "month").endOf("month")
    ]
  },
  { label: "This Month", value: [dayjs().startOf("month"), dayjs().endOf("month")] },
  {
    label: "Next Month",
    value: [
      dayjs().startOf("month").add(1, "month"),
      dayjs().startOf("month").add(1, "month").endOf("month")
    ]
  },
  {
    label: "Last Quarter",
    value: [
      dayjs().startOf("quarter").subtract(1, "quarter"),
      dayjs().startOf("quarter").subtract(1, "day")
    ]
  },
  {
    label: "This Quarter",
    value: [dayjs().startOf("quarter"), dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")]
  },
  {
    label: "Last 3 Months (Exlcusive)",
    value: [
      dayjs().startOf("month").subtract(3, "month"),
      dayjs().startOf("month").subtract(1, "month").endOf("month")
    ]
  },
  {
    label: "Last 3 Months (Inclusive)",
    value: [dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month")]
  }
];

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

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

  return (
    <Form form={form} onFinish={handleFinish}>
      <Space wrap align="baseline">
        <Space wrap align="start">
          <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" presets={reportingDatePresets} />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            Run Search
          </Button>
        </Space>
        <Space align="baseline" wrap>
          <Typography.Title level={5}>Quick Ranges:</Typography.Title>
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "Last Month"
              });
              handleFinish({
                dateRange: [
                  dayjs().startOf("month").subtract(1, "month"),
                  dayjs().startOf("month").subtract(1, "month").endOf("month")
                ]
              });
            }}
          >
            Last Month
          </Button>
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "This Month"
              });
              handleFinish({
                dateRange: [dayjs().startOf("month"), dayjs().endOf("month")]
              });
            }}
          >
            This Month
          </Button>
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "Next Month"
              });
              handleFinish({
                dateRange: [
                  dayjs().startOf("month").add(1, "month"),
                  dayjs().startOf("month").add(1, "month").endOf("month")
                ]
              });
            }}
          >
            Next Month
          </Button>
          <Divider type="vertical" />
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "3 Months Exclusive"
              });
              handleFinish({
                dateRange: [
                  dayjs().startOf("month").subtract(3, "month"),
                  dayjs().startOf("month").subtract(1, "month").endOf("month")
                ]
              });
            }}
          >
            Last 3 Months (Exclusive)
          </Button>
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "3 Months Inclusive"
              });
              handleFinish({
                dateRange: [dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month")]
              });
            }}
          >
            Last 3 Months (Inclusive)
          </Button>
          <Divider type="vertical" />
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "Last Quarter"
              });
              handleFinish({
                dateRange: [
                  dayjs().startOf("quarter").subtract(1, "quarter"),
                  dayjs().startOf("quarter").subtract(1, "day")
                ]
              });
            }}
          >
            Last Quarter
          </Button>
          <Button
            onClick={() => {
              ipcRenderer.send(ipcTypes.app.toMain.track, {
                event: "REPORT_QUICK_DATE_RANGE",
                range: "This Quarter"
              });
              handleFinish({
                dateRange: [dayjs().startOf("quarter"), dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")]
              });
            }}
          >
            This Quarter
          </Button>
        </Space>
      </Space>
    </Form>
  );
}
