import { useMutation } from "@apollo/client";
import { Form, Modal, notification } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { RECEIVE_PARTS_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,
  partsReceiveModal: selectPartsReceive
});

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

export function PartsReceiveModalContainer({ partsReceiveModal, toggleModalVisible, currentUser, bodyshop }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const { open, context, actions } = partsReceiveModal;
  const { partsorderlines } = context;

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

  const [receivePartsLine] = useMutation(RECEIVE_PARTS_LINE);

  const handleFinish = async (values) => {
    logImEXEvent("parts_order_receive");
    setLoading(true);
    const result = await Promise.all(
      values.partsorderlines.map((li) => {
        return receivePartsLine({
          variables: {
            lineId: li.joblineid,
            line: {
              location: li.location,
              status: bodyshop.md_order_statuses.default_received || "Received*"
            },
            orderLineId: li.id,
            orderLine: {
              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")
    });
    setLoading(false);
    if (refetch) refetch();
    toggleModalVisible();
  };

  const initialValues = {
    partsorderlines: partsorderlines
  };

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

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

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