import { useMutation } from "@apollo/client";
import { Form, Modal, notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPartsReceive } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import PartsReceiveModalComponent from "./parts-receive-modal.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  partsOrderModal: selectPartsReceive,
});

const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("partsReceive")),
});

export function PartsReceiveModalContainer({
  partsOrderModal,
  toggleModalVisible,
  currentUser,
  bodyshop,
}) {
  const { t } = useTranslation();

  const { visible, context, actions } = partsOrderModal;
  const { partsorderlines } = context;

  const { refetch } = actions;
  const [form] = Form.useForm();

  const [updateJobLines] = useMutation(UPDATE_JOB_LINE);

  const handleFinish = async (values) => {
    logImEXEvent("parts_order_receive");

    const result = await Promise.all(
      values.partsorderlines.map((li) => {
        return updateJobLines({
          variables: {
            lineId: li.joblineid,
            line: {
              location: li.location,
              status:
                bodyshop.md_order_statuses.default_received || "Received*",
            },
          },
        });
      })
    );

    result.forEach((jobLinesResult) => {
      if (jobLinesResult.errors) {
        notification["error"]({
          message: t("parts_orders.errors.creating"),
          description: JSON.stringify(jobLinesResult.errors),
        });
      }
    });

    notification["success"]({
      message: t("parts_orders.successes.received"),
    });

    if (refetch) refetch();
    toggleModalVisible();
  };

  const initialValues = {
    partsorderlines: partsorderlines,
  };

  useEffect(() => {
    if (visible && !!partsorderlines) {
      form.resetFields();
    }
  }, [visible, partsorderlines, form]);

  return (
    <Modal
      visible={visible}
      title={t("parts_orders.labels.receive")}
      onCancel={() => toggleModalVisible()}
      onOk={() => form.submit()}
      destroyOnClose
      forceRender
    >
      <Form
        form={form}
        layout="vertical"
        autoComplete="no"
        onFinish={handleFinish}
        initialValues={initialValues}
      >
        <PartsReceiveModalComponent form={form} />
      </Form>
    </Modal>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PartsReceiveModalContainer);