bodyshop/client/src/components/report-center-modal/report-center-modal.component.jsx

import { useLazyQuery } from "@apollo/client";
import { Button, DatePicker, Form, Select, Switch } from "antd";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
import { selectReportCenter } from "../../redux/modals/modals.selectors";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import DatePIckerRanges from "../../utils/DatePickerRanges";

const mapStateToProps = createStructuredSelector({
  reportCenterModal: selectReportCenter,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ReportCenterModalComponent);

export function ReportCenterModalComponent({ reportCenterModal }) {
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const Templates = TemplateList("report_center");
  const { visible } = reportCenterModal;

  const [callVendorQuery, { data, called }] = useLazyQuery(QUERY_ALL_VENDORS, {
    skip: !(
      visible &&
      Templates[form.getFieldValue("key")] &&
      Templates[form.getFieldValue("key")].idtype
    ),
  });

  const handleFinish = (values) => {
    const start = values.dates[0];
    const end = values.dates[1];
    const { id } = values;
    console.log("values", values);
    GenerateDocument(
      {
        name: values.key,
        variables: {
          ...(start ? { start: moment(start).format("YYYY-MM-DD") } : {}),
          ...(end ? { end: moment(end).format("YYYY-MM-DD") } : {}),
          ...(id ? { id: id } : {}),
        },
      },
      {
        to: values.to,
      },
      values.email ? "e" : "p"
    );
  };

  return (
    <div>
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        layout="vertical"
        form={form}
      >
        <Form.Item
          name="key"
          label={t("reportcenter.labels.key")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Select>
            {Object.keys(Templates).map((key) => (
              <Select.Option key={key}>{Templates[key].title}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item dependencies={["key"]}>
          {() => {
            const key = form.getFieldValue("key");
            if (!key) return null;
            //Kind of Id
            const idtype = Templates[key] && Templates[key].idtype;
            if (!idtype) return null;
            if (!called && idtype === "vendor") callVendorQuery();
            if (idtype === "vendor")
              return (
                <Form.Item
                  name="id"
                  label={t("reportcenter.labels.vendor")}
                  rules={[
                    {
                      required: true,
                      message: t("general.validation.required"),
                    },
                  ]}
                >
                  <VendorSearchSelect options={data ? data.vendors : []} />
                </Form.Item>
              );
            else return null;
          }}
        </Form.Item>
        <Form.Item
          name="dates"
          label={t("reportcenter.labels.dates")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <DatePicker.RangePicker
            format="YYYY-MM-DD"
            ranges={DatePIckerRanges}
          />
        </Form.Item>

        <Form.Item
          name="email"
          label={t("reportcenter.labels.generateasemail")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "1rem",
          }}
        >
          <Button onClick={() => form.submit()} style={{}}>
            {t("reportcenter.actions.generate")}
          </Button>
        </div>
      </Form>
    </div>
  );
}